/* rn-site-home.css: Home (roachnet.org/home/), the Mac tour. A product page: the download beside
   the facts that decide it, the app's panes in a zig-zag with depth, what's new in 1.1, and the
   downloads. Screenshots carry the page; the copy stays short beside them. */

/* ---------------------------------------------------------------- the hero */
.rn-home-hero { padding-block: clamp(32px, 4vw, 72px) clamp(56px, 6vw, 110px) !important; }
.rn-home-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.rn-home-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; container-type: inline-size; }
/* The longest word, "Everything", is 6.84em wide: the headline never outgrows its column. */
.rn-home-hero .rn-display { font-size: min(clamp(2.6rem, 1.2rem + 5.4vw, 6.2rem), 100cqi / 7.1); line-height: 0.94; max-width: 11ch; margin-bottom: 22px; }
.rn-home-hero .rn-lede { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.32rem); }
.rn-home-hero__note { margin-top: 14px; max-width: 54ch; font-size: 0.95rem; color: var(--rw-text-soft); }
.rn-shot--hero { width: 100%; }
.rn-shot--hero .rn-shot__tags { position: static; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; text-align: left; }
@media (min-width: 1100px) {
  .rn-home-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .rn-shot--hero { margin-right: calc(-1 * min(4vw, 56px)); }
  .rn-shot--hero .rn-shot__tags { position: absolute; inset: auto auto -26px -34px; flex-direction: column; align-items: flex-start; }
  .rn-shot--hero .rn-shot__tags .rn-tag:last-child { margin-left: 46%; margin-top: -4px; }
}

/* ---------------------------------------------------------------- offline on purpose */
.rn-home-why__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; }
@media (min-width: 760px) { .rn-home-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- the panes: a zig-zag with depth */
.rn-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 7vw, 120px); }
.rn-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.rn-pane__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 30rem; }
.rn-pane__name { font: 600 0.74rem/1.3 var(--rw-font-mono); letter-spacing: var(--rw-tracking-caps); text-transform: uppercase; color: var(--rw-accent); }
.rn-pane__copy h3 { font-family: var(--rw-font-display); font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.02; color: var(--rw-text); }
.rn-pane__copy p:last-child { color: var(--rw-text-muted); font-size: 1.04rem; }
.rn-pane /* the LED line sits on ::after (first in the grid by order), so ::before stays free for the text veil */
.rn-pane__copy::after { content: ""; order: -1; display: block; width: 56px; height: 4px; margin-bottom: 6px; background: radial-gradient(circle, var(--rw-signal) 1.4px, transparent 1.9px) 0 50% / 10px 4px repeat-x; opacity: 0.25; transition: opacity var(--rw-dur-4) var(--rw-ease-gentle); }
.rn-pane.is-on .rn-pane__copy::after, html:not(.rw-js) .rn-pane .rn-pane__copy::after { opacity: 1; filter: drop-shadow(0 0 3px var(--rw-signal)); }
@media (min-width: 960px) {
  .rn-pane { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 80px); }
  .rn-pane:nth-child(even) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr); }
  .rn-pane:nth-child(even) .rn-shot { order: 2; }
}

/* ---------------------------------------------------------------- what's new in 1.1 */
.rn-home-new__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; }
@media (min-width: 720px) { .rn-home-new__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rn-home-new__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- where it helps */
.rn-home-fit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; }
.rn-card--quote h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
@media (min-width: 900px) { .rn-home-fit__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

/* ---------------------------------------------------------------- RoachNet Apps */
.rn-home-apps__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; }
.rn-home-apps__grid > li { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .rn-home-apps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rn-home-apps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- under the hood: a spec sheet */
.rn-home-hood__list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--rw-line-strong); }
.rn-hood { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 40px; padding: clamp(20px, 2vw, 30px) 0; border-bottom: 1px solid var(--rw-line); }
.rn-hood dt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-family: var(--rw-font-display); font-weight: 760; font-stretch: 106%; letter-spacing: -0.015em; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.15; color: var(--rw-text); }
.rn-hood dt span { font: 600 0.72rem/1.3 var(--rw-font-mono); letter-spacing: var(--rw-tracking-caps); text-transform: uppercase; color: var(--rw-signal-text); }
.rn-hood dd { margin: 0; color: var(--rw-text-muted); }
@media (min-width: 900px) { .rn-hood { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }

/* ---------------------------------------------------------------- downloads */
.rn-home-get__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rn-card--dmg { border-color: color-mix(in srgb, var(--rw-action-light) 50%, var(--rw-line-strong)); background-image: linear-gradient(160deg, color-mix(in srgb, var(--rw-action) 28%, transparent), transparent 60%); }
.rn-card--dmg .rn-card__title { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); }
.rn-home-get__note { margin-top: 24px; max-width: 70ch; color: var(--rw-text-muted); }
@media (min-width: 900px) { .rn-home-get__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- independent */
.rn-band { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; max-width: 900px; margin-inline: auto; padding: clamp(32px, 5vw, 64px); text-align: center; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-r-xl); background: var(--rn-card); box-shadow: var(--rw-elev-2); }
.rn-band .rn-eyebrow { margin-bottom: 0; }
.rn-band .rn-lede { margin-inline: auto; }