/* Resumeboard — landing page
 * A marketing page that earns the click. Editorial type, real whitespace,
 * one accent, and a product mock that matches what the app actually does.
 *
 * This file also carries the landing page's half of the shared site shell.
 * The other half lives in examples.css (about/privacy/404/examples),
 * gallery.css (ats/templates) and site.css (guides): same 1200px measure,
 * same 56px header bar, same brand tile, same nav, same footer, same
 * vertical rhythm. The values are repeated rather than shared because the
 * pages link exactly one of these sheets and no bundler exists to factor
 * them out — the tokens below are the contract, keep them in step.
 */

:root {
  --rbx-page: 1200px;          /* the one page measure for the whole site */
  --rbx-gutter: 1.5rem;        /* side padding, floors at 1.25rem */
  --rbx-head-h: 3.5rem;        /* header bar height */
  --rbx-mark: 26px;            /* brand tile */
  --rbx-section: 4rem;         /* space between major sections */
  --rbx-top: 4rem;             /* first content below the header */
  --rbx-foot-pad: 3rem 2rem;   /* footer padding */
  /* Small text the reader has to read — eyebrows, table heads, footer
   * headings, captions. The ramp's --rb-text-faint and --rb-text-muted
   * steps both sit under 4.5:1 on these surfaces, so the site labels at
   * this size use this step instead. Dark mode already clears the bar at
   * --rb-text-muted. */
  --rbx-label: var(--rb-text-secondary);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --rbx-label: var(--rb-text-muted); }
}
html[data-theme="dark"] { --rbx-label: var(--rb-text-muted); }

/* site.css is linked here for the skip link, the overlay root and the tooltip
   rule, and it carries the reading scale the guides use. The landing page is
   the product rather than a document about it, so it re-seats the body on the
   app's own type ramp instead. */
.rb-home {
  background: var(--rb-bg-elevated);
  color: var(--rb-text);
  overflow-x: hidden;
  font-family: var(--rb-font-sans);
  font-size: var(--rb-text-base);
  line-height: 1.55;
}
/* Font family only. Setting weight or line-height here would out-specify
 * every per-block heading rule in this file — the hero title needs 1.06, not
 * the 1.15 the shared heading rule carries. */
.rb-home h1, .rb-home h2, .rb-home h3, .rb-home h4,
.rb-home .rb-h2, .rb-home .rb-nav__word, .rb-home .rb-eyebrow,
.rb-home .rb-mock__name, .rb-mock__row b, .rb-mock__file {
  font-family: var(--rb-font-sans);
}

/* Scoped to the page on purpose. This sheet is also linked by editor.html for
 * its theme, and `.rb-wrap`, `.rb-section` and `.rb-section__head` are the
 * resume document's own class names too — unscoped, 4rem of landing rhythm is
 * added to every section of the page and 24px of gutter to every form toolbar.
 * Same names, two vocabularies: the marketing page has to say which one it means. */
.rb-home .rb-wrap {
  max-width: var(--rbx-page);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, var(--rbx-gutter));
}
.rb-home .rb-wrap--narrow { max-width: 760px; }

.rb-home .rb-section { padding-block: var(--rbx-section); }
.rb-home .rb-section--sunken { background: var(--rb-bg); }
.rb-home .rb-section--sunken .rb-wrap { border-radius: var(--rb-radius-2xl); }

.rb-h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
  max-width: 22ch;
}
.rb-sub {
  margin-top: var(--rb-space-3);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  color: var(--rb-text-secondary);
  max-width: 58ch;
  text-wrap: pretty;
}
.rb-home .rb-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--rb-space-6);
  flex-wrap: wrap;
  margin-bottom: var(--rb-space-8);
}

.rb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--rb-space-2);
  padding: 5px var(--rb-space-3) 5px var(--rb-space-2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-full);
  background: var(--rb-bg);
  font-size: var(--rb-text-sm);
  font-weight: 550;
  color: var(--rb-text-secondary);
  margin-bottom: var(--rb-space-5);
}
.rb-eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rb-green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-green-600) 18%, transparent);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .rb-eyebrow__dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
}
html[data-theme="dark"] .rb-eyebrow__dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }

/* ================================ NAV =============================== */

.rb-nav {
  position: sticky; top: 0; z-index: var(--rb-z-header);
  background: color-mix(in srgb, var(--rb-bg-elevated) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rb-border);
}
.rb-nav__inner {
  max-width: var(--rbx-page); margin-inline: auto;
  padding: 0 clamp(1.25rem, 4vw, var(--rbx-gutter));
  min-height: var(--rbx-head-h);
  display: flex; align-items: center; gap: var(--rb-space-6);
}
.rb-nav__brand {
  display: inline-flex; align-items: center; gap: var(--rb-space-2);
  color: var(--rb-text); text-decoration: none;
  font-weight: 650; letter-spacing: -0.02em; font-size: 1.0625rem;
  flex: none;
}
.rb-nav__mark {
  display: grid; place-items: center;
  width: var(--rbx-mark); height: var(--rbx-mark);
  border-radius: var(--rb-radius-sm);
  background: var(--rb-accent-600);
  color: #fff;
  flex: none;
}
.rb-nav__mark svg { width: 18px; height: 18px; }
.rb-nav__links {
  display: flex; gap: var(--rb-space-1);
  margin-left: auto;
  font-size: var(--rb-text-base);
  font-weight: 500;
}
.rb-nav__links a {
  color: var(--rb-text-secondary);
  text-decoration: none;
  padding: 6px var(--rb-space-3);
  border-radius: var(--rb-radius-sm);
  transition: color var(--rb-dur-fast) var(--rb-ease-out), background var(--rb-dur-fast) var(--rb-ease-out);
}
.rb-nav__links a:hover { color: var(--rb-text); background: var(--rb-bg-hover); }
.rb-nav__links a[aria-current="page"] { color: var(--rb-text); font-weight: 600; background: var(--rb-bg-hover); }
.rb-nav.is-stuck { border-bottom-color: var(--rb-border-strong); }
.rb-nav__end { display: flex; align-items: center; gap: var(--rb-space-2); flex: none; }
/* The tooltip is painted from site.css, which positions it against the
   nearest positioned ancestor — here that would be the sticky bar. */
.rb-nav__end [data-tip] { position: relative; }

/* ================================ HERO ============================== */

.rb-hero {
  position: relative;
  padding-block: var(--rbx-top) var(--rbx-section);
  isolation: isolate;
}
.rb-hero::before {
  content: '';
  position: absolute; inset: -40% 0 auto; height: 140%;
  background: radial-gradient(60% 50% at 22% 40%, color-mix(in srgb, var(--rb-accent-500) 11%, transparent), transparent 70%);
  pointer-events: none; z-index: -1;
}
.rb-hero__inner {
  max-width: var(--rbx-page); margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, var(--rbx-gutter));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.rb-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 680;
  letter-spacing: -0.033em;
  line-height: 1.06;
  text-wrap: balance;
}
.rb-hero__lede {
  margin-top: var(--rb-space-5);
  font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
  line-height: 1.62;
  color: var(--rb-text-secondary);
  max-width: 52ch;
  text-wrap: pretty;
}
.rb-hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--rb-space-3);
  margin-top: var(--rb-space-8);
}
.rb-cta-main { padding-inline: var(--rb-space-6); }
.rb-hero__points {
  display: flex; flex-wrap: wrap;
  gap: var(--rb-space-2) var(--rb-space-5);
  margin-top: var(--rb-space-6);
  font-size: var(--rb-text-sm);
  color: var(--rbx-label);
}
.rb-hero__points li { display: flex; align-items: center; gap: var(--rb-space-2); }
.rb-hero__points .rb-i { color: var(--rb-green-600); stroke-width: 2.6; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .rb-hero__points .rb-i { color: #34d399; }
}
html[data-theme="dark"] .rb-hero__points .rb-i { color: #34d399; }

/* Bleeding this outside the art column used to push the document's scroll
   width past the viewport, which broke full-page capture and sticky right
   edges. The wash reads the same clipped to its own box. */
.rb-hero__glow {
  position: absolute; inset-inline: 0; bottom: -30%;
  height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--rb-accent-400) 14%, transparent), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}

/* ============================ PRODUCT MOCK ========================== */

.rb-mock {
  position: relative;
  border-radius: var(--rb-radius-xl);
  background: var(--rb-bg-elevated);
  border: 1px solid var(--rb-border);
  box-shadow:
    0 1px 2px rgba(16,24,40,.06),
    0 12px 28px -8px rgba(16,24,40,.14),
    0 40px 80px -32px rgba(16,24,40,.20);
  overflow: hidden;
  transform: perspective(1800px) rotateY(-6deg) rotateX(2deg);
  transition: transform var(--rb-dur-slow) var(--rb-ease-out);
}
.rb-mock:hover { transform: perspective(1800px) rotateY(-2deg) rotateX(0deg); }
@media (max-width: 980px) { .rb-mock { transform: none; } }

.rb-mock__bar {
  display: flex; align-items: center; gap: var(--rb-space-3);
  padding: 10px var(--rb-space-4);
  border-bottom: 1px solid var(--rb-border-subtle);
  background: var(--rb-bg);
  font-size: var(--rb-text-xs);
}
.rb-mock__dots { display: flex; gap: 5px; }
.rb-mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--rb-border-strong); }
.rb-mock__file { font-weight: 600; color: var(--rb-text-secondary); }
.rb-mock__pill {
  margin-left: auto;
  padding: 2px 8px; border-radius: var(--rb-radius-full);
  background: var(--rb-green-50); color: var(--rb-green-700);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .rb-mock__pill { background: rgba(4,120,87,.18); color: #6ee7b7; }
}
html[data-theme="dark"] .rb-mock__pill { background: rgba(4,120,87,.18); color: #6ee7b7; }

.rb-mock__body { display: grid; grid-template-columns: 44px minmax(0,1fr) 168px; min-height: 340px; }
.rb-mock__rail {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: var(--rb-space-5) 0;
  border-right: 1px solid var(--rb-border-subtle);
  background: var(--rb-bg);
}
.rb-mock__rail span { width: 14px; height: 3px; border-radius: 2px; background: var(--rb-border-strong); }
.rb-mock__rail .is-on { background: var(--rb-accent-500); width: 20px; }

.rb-mock__page { padding: var(--rb-space-6) var(--rb-space-5); }
.rb-mock__name { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.rb-mock__role { font-size: 10.5px; color: var(--rb-accent-600); margin-top: 2px; font-weight: 550; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .rb-mock__role { color: var(--rb-accent-300); } }
html[data-theme="dark"] .rb-mock__role { color: var(--rb-accent-300); }
.rb-mock__meta { font-size: 8.5px; color: var(--rb-text-faint); margin-top: 5px; }
.rb-mock__h {
  font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rb-text);
  margin-top: 16px; padding-bottom: 3px;
  border-bottom: 1px solid var(--rb-border-strong);
}
.rb-mock__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 12px;
}
.rb-mock__row b { font-size: 10px; font-weight: 650; }
.rb-mock__row em { font-style: normal; font-size: 8px; color: var(--rb-text-faint); white-space: nowrap; }
.rb-mock__org { font-size: 8.5px; color: var(--rb-text-muted); margin-top: 2px; }
.rb-mock__li {
  height: 5px; border-radius: 2px; background: var(--rb-bg-active);
  margin-top: 6px;
}
.rb-mock__li.short { width: 62%; }
.rb-mock__li::before {
  content: ''; display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--rb-text-faint);
  margin-right: 6px; vertical-align: middle;
}

.rb-mock__panel {
  border-left: 1px solid var(--rb-border-subtle);
  background: var(--rb-bg);
  padding: var(--rb-space-4) var(--rb-space-3);
  display: flex; flex-direction: column; gap: 6px;
}
.rb-mock__ptab {
  font-size: 9px; font-weight: 600; color: var(--rb-text-faint);
  padding: 3px 0;
}
.rb-mock__ptab.is-on { color: var(--rb-text-accent); }
.rb-mock__field {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--rb-border);
  background: var(--rb-bg-elevated);
  margin-top: 4px;
}
.rb-mock__field span { font-size: 7.5px; color: var(--rb-text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.rb-mock__field b { font-size: 9px; font-weight: 550; }
.rb-mock__field.is-focus { border-color: var(--rb-accent-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rb-accent-500) 20%, transparent); }
.rb-mock__field.is-focus b::after {
  content: ''; display: inline-block; width: 1px; height: 9px;
  background: var(--rb-accent-600); margin-left: 1px; vertical-align: -1px;
  animation: rb-caret 1.1s steps(1) infinite;
}
@keyframes rb-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rb-mock__field.is-focus b::after { animation: none; } }

/* ============================== STEPS =============================== */

.rb-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--rb-space-6);
  margin-top: var(--rb-space-8);
  counter-reset: s;
}
.rb-steps li {
  position: relative;
  padding: var(--rb-space-6);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  background: var(--rb-bg-elevated);
}
.rb-steps__n {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--rb-accent-50);
  color: var(--rb-accent-700);
  font-weight: 700; font-size: 0.875rem;
  margin-bottom: var(--rb-space-4);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .rb-steps__n { background: var(--rb-accent-900); color: var(--rb-accent-200); }
}
html[data-theme="dark"] .rb-steps__n { background: var(--rb-accent-900); color: var(--rb-accent-200); }
.rb-steps h3 { font-size: 1.0625rem; font-weight: 640; letter-spacing: -0.012em; }
.rb-steps p { margin-top: var(--rb-space-2); font-size: var(--rb-text-base); line-height: 1.62; color: var(--rb-text-secondary); }

/* ============================== CARDS =============================== */

.rb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--rb-space-4);
  margin-top: var(--rb-space-8);
}
.rb-card2 {
  padding: var(--rb-space-6);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  background: var(--rb-bg-elevated);
  transition: border-color var(--rb-dur-base) var(--rb-ease-out), box-shadow var(--rb-dur-base) var(--rb-ease-out);
}
.rb-card2:hover { border-color: var(--rb-border-strong); box-shadow: var(--rb-shadow-sm); }
.rb-card2 h3 { font-size: 1rem; font-weight: 640; letter-spacing: -0.01em; }
.rb-card2 p { margin-top: var(--rb-space-2); font-size: var(--rb-text-base); line-height: 1.62; color: var(--rb-text-secondary); }

/* ============================ TEMPLATE ROW ========================== */

.rb-tplrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--rb-space-3);
}
.rb-tplrow a {
  display: flex; flex-direction: column; gap: var(--rb-space-1);
  padding: var(--rb-space-4);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-md);
  background: var(--rb-bg-elevated);
  text-decoration: none;
  transition: border-color var(--rb-dur-base) var(--rb-ease-out), transform var(--rb-dur-base) var(--rb-ease-out);
}
.rb-tplrow a:hover { border-color: var(--rb-accent-400); transform: translateY(-2px); }
.rb-tplrow__t { font-size: var(--rb-text-md); font-weight: 620; color: var(--rb-text); }
.rb-tplrow__d { font-size: var(--rb-text-sm); color: var(--rbx-label); line-height: 1.5; }

/* ================================ FAQ =============================== */

.rb-faq {
  border-bottom: 1px solid var(--rb-border);
  padding-block: var(--rb-space-5);
}
.rb-faq summary {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rb-space-4);
}
.rb-faq summary::-webkit-details-marker { display: none; }
.rb-faq summary::after {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  margin-top: 5px;
  border-right: 1.75px solid var(--rb-text-muted);
  border-bottom: 1.75px solid var(--rb-text-muted);
  transform: rotate(45deg);
  transition: transform var(--rb-dur-base) var(--rb-ease-out);
}
.rb-faq[open] summary::after { transform: rotate(-135deg); margin-top: 8px; }
.rb-faq summary:hover { color: var(--rb-text-accent); }
.rb-faq p {
  margin-top: var(--rb-space-3);
  font-size: var(--rb-text-md);
  line-height: 1.68;
  color: var(--rb-text-secondary);
  max-width: 68ch;
  text-wrap: pretty;
}
.rb-faq p + p { margin-top: var(--rb-space-3); }
#faq .rb-h2 { margin-bottom: var(--rb-space-4); max-width: none; }

/* =============================== CLOSER ============================= */

.rb-closer { padding-block: var(--rbx-section); }
.rb-closer__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--rb-space-4);
}
.rb-closer__inner .rb-h2 { max-width: none; }
.rb-closer__inner p { font-size: 1.0625rem; color: var(--rb-text-secondary); margin-bottom: var(--rb-space-2); }

/* =============================== FOOTER ============================= */
/* Same band, measure, heading scale and link scale as the footer in
   examples.css, gallery.css and site.css. */

.rb-foot {
  border-top: 1px solid var(--rb-border);
  background: var(--rb-bg-sunken);
  padding-block: var(--rbx-foot-pad);
  font-size: var(--rb-text-sm);
}
.rb-foot__inner { display: flex; flex-direction: column; gap: var(--rb-space-8); }
.rb-foot__brand {
  display: flex; align-items: center; gap: var(--rb-space-2);
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em;
}
/* An explicit track count, not auto-fit: with a flex-column parent Chromium
   sizes a row whose empty auto-fit tracks have collapsed to 0 from a stale
   height, which left a 400px void under the link columns. */
.rb-foot__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rb-space-8) var(--rb-space-6);
}
.rb-foot__links h2 {
  font-size: var(--rb-text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--rbx-label);
  margin-bottom: var(--rb-space-2);
}
.rb-foot__links a {
  display: block;
  font-size: var(--rb-text-sm);
  color: var(--rb-text-secondary);
  text-decoration: none;
  padding-block: 3px;
}
.rb-foot__links a:hover { color: var(--rb-text); text-decoration: underline; }
.rb-foot__legal {
  font-size: var(--rb-text-xs);
  color: var(--rbx-label);
  border-top: 1px solid var(--rb-border-subtle);
  padding-top: var(--rb-space-5);
}

/* ============================== RESPONSIVE ========================== */

@media (max-width: 980px) {
  .rb-hero__inner { grid-template-columns: 1fr; }
  .rb-hero__art { order: 2; }
  .rb-foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The nav links used to disappear here with nothing in their place, so the
 * four sections the header advertises were only reachable by scrolling to the
 * footer. They come back as a second row: a sticky header is allowed to be
 * two rows tall on a phone, and a wrapping row is a menu with no JavaScript
 * and nothing to get stuck open. The row scrolls sideways rather than
 * wrapping to three, which would push the hero off the first screen. */
@media (max-width: 980px) {
  .rb-nav__inner {
    flex-wrap: wrap;
    gap: 0 var(--rb-space-4);
    padding-block: 0;
  }
  .rb-nav__links {
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
    margin-bottom: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rb-nav__links::-webkit-scrollbar { height: 0; }
  .rb-nav__end { margin-left: auto; }
  .rb-nav__links a {
    display: block;
    white-space: nowrap;
    padding-block: 0;
    min-height: 44px;
    line-height: 44px;
  }
}

/* 360 is the one width where the brand, the theme toggle and the call to
 * action cannot share a row: they measure 331px against 320px of column.
 * Rather than let the header wrap to three rows, the gaps and the button's
 * own padding give back the 20px. Nothing is dropped. */
@media (max-width: 380px) {
  .rb-nav__inner { gap: 0 var(--rb-space-2); }
  .rb-nav__end { gap: var(--rb-space-1); }
  .rb-nav__end .rb-btn--primary { padding-inline: var(--rb-space-2); }
  .rb-nav__brand { font-size: 1rem; }
  /* The strip is wider than the column here. A fade on the trailing edge is
   * the only honest signal that there is more of it to the right — a word
   * sliced in half reads as a layout fault. */
  .rb-nav__links {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

@media (max-width: 720px) {
  .rb-mock__body { grid-template-columns: 34px minmax(0,1fr); }
  .rb-mock__panel { display: none; }
  .rb-nav__end .rb-btn--primary { padding-inline: var(--rb-space-3); }
  .rb-hero__cta .rb-btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .rb-foot__links { grid-template-columns: minmax(0, 1fr); }
}
/* Cards in the template row and the feature grid are links end to end, so
   they only need enough height that the two lines inside are not packed
   against each other. */
@media (max-width: 980px) {
  .rb-tplrow a { padding: var(--rb-space-4); }
}

/* ---------- Touch targets ----------
 * Every control on this page is a link or a button a thumb has to hit. The
 * page is otherwise entirely static — no framework, no router — so there is
 * no better place for this than the stylesheet that owns the surfaces.
 *
 * The floor is a property of the pointer, not of the width. The 980px query
 * above is a layout decision — the header becomes two rows because four
 * section links and a call to action cannot share one — and none of that is
 * true of a target size. A tablet in landscape is 1024px: a full tablet, and
 * two dozen pixels past the phone breakpoint, getting 32px chrome while the
 * phone beside it got 44. So the sizes live here and the query above keeps
 * only the layout.
 *
 * `--rb-touch` is the one number to change if the floor ever moves.
 *
 * The `.rb-home .rb-btn.rb-btn--icon` form is not redundant. a11y-fixes.css
 * lands after this file and floors every icon button at 24px through
 * `body :is(...)`, and :is() takes the specificity of its most specific
 * argument, so that rule outranks a two-class selector here in any file. The
 * theme toggle — the only icon button on this page — stayed at 32px while
 * every labelled button beside it went to 44. One more class is the fix. */
@media screen and ((hover: none) or (pointer: coarse)) {
  :root { --rb-touch: 44px; }

  .rb-nav__brand,
  .rb-nav__end .rb-btn,
  .rb-hero__cta .rb-btn,
  .rb-closer .rb-btn,
  /* Any other button-shaped link on the page — "See all templates" is the
   * only one today, but a new section should not have to remember this. */
  .rb-home .rb-btn,
  .rb-home .btn,
  .rb-home .rb-btn.rb-btn--icon,
  .rb-home .rb-btn.rb-btn--sm {
    min-height: var(--rb-touch);
  }
  .rb-nav__brand { min-height: var(--rb-touch); }
  .rb-nav__end .rb-btn--icon { width: var(--rb-touch); }
  /* Above 980 the four section links share the header row with the call to
   * action and carry 6px of padding instead of a height, so they measured
   * 34px. Same target, same floor. */
  .rb-nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--rb-touch);
  }

  /* The wordmark in the footer is a link of its own, and the one that takes
   * you back to the top of the page. It sat outside the link-column rule
   * beside it and measured 26px tall. */
  .rb-foot__brand a,
  .rb-foot__links a {
    display: flex;
    align-items: center;
    min-height: var(--rb-touch);
  }

  /* The FAQ question is the whole row, not the 27px of text in it: the row is
   * a 68px band with the text at the top and dead space below, so tapping
   * anywhere under the words did nothing. */
  .rb-faq summary {
    align-items: center;
    min-height: var(--rb-touch);
    gap: var(--rb-space-4);
  }
  .rb-faq summary::after { margin-top: 0; }
  .rb-faq[open] summary::after { margin-top: 0; }

  /* Overlays. app.css carries the same floors for the editor, but index.html
   * does not link app.css — it is the marketing page, not the shell. The
   * result was a build dialog whose only way out was a 26x26 close button,
   * on the one dialog a phone user is guaranteed to meet. Scoped to
   * .rb-home so the editor keeps app.css as the single source there.
   * Everything ui.js and the popover mount lands in #rb-overlay-root,
   * outside every page surface, so it has to be named here. */
  .rb-home :is(.rb-modal, .rb-cmd, .rb-pop) :is(button, a, input, select, textarea, [role="button"], [role="option"], [role="menuitem"]):not([tabindex="-1"]) {
    min-height: var(--rb-touch);
  }
  .rb-home :is(.rb-modal, .rb-cmd) :is(.rb-btn--icon, .rb-btn--sm.rb-btn--icon) {
    min-width: var(--rb-touch);
  }
  .rb-home :is(.rb-pop__item, .rb-optcard, .rb-disclosure__summary, .rb-theme-opt, .rb-scale-picker__opt, .rb-cmd__opt) {
    min-height: var(--rb-touch);
  }
}

/* The single page: the intro sits above the editor and steps aside the moment
   a resume exists, so the document is the only thing on screen once there is
   something to look at. */
.rb-intro {
  display: none;
  padding: var(--rb-space-5) clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rb-border-subtle);
  background: var(--rb-bg);
}
html[data-rb-empty="true"] .rb-intro { display: block; }
.rb-intro__copy {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rb-space-4) var(--rb-space-8);
}
.rb-intro__copy > .rb-eyebrow { grid-column: 1 / -1; margin-bottom: 0; justify-self: start; }
.rb-intro__title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 660;
  letter-spacing: -0.026em;
  line-height: 1.15;
  font-family: var(--rb-font-sans);
}
.rb-intro__lede {
  margin-top: var(--rb-space-1);
  font-size: var(--rb-text-base);
  line-height: 1.5;
  color: var(--rb-text-secondary);
  max-width: 68ch;
}
.rb-intro__cta { display: flex; flex-wrap: wrap; gap: var(--rb-space-2); margin-top: 0; }
.rb-intro__points { display: none; }
/* x */