/* Resource pages share Reliability Factory's site tokens and chrome. */
.rf-resources-page .nav, .rf-resources-page .footer { font-family: var(--font-sans); }
.rf-resources-page .nav .btn, .rf-resources-page .footer { color: var(--text-primary); }
.rf-resources-page .nav .btn-primary { background: var(--rr-deep); color: white; }
.rf-resources-page .article-head h1 { max-width: 24ch; }
.rf-resources-page .article-lede { max-width: 68ch; text-align: left; }
.rf-resources-page .grad-text { background: none; -webkit-text-fill-color: var(--rr-cyan-ink); color: var(--rr-cyan-ink); }
.rf-resources-page .breadcrumb { flex-wrap: wrap; }
.rf-resources-page .footer { background: var(--rr-paper); }
.rf-resources-page .res-btn.primary { background: var(--rr-deep); color: white; border-color: var(--rr-deep); }
.rf-resources-page .res-btn.primary:hover { background: var(--rr-hull); }
.rf-resources-page .shelf-hero-media img { object-fit: contain; border: 0; box-shadow: none; }
.rf-resources-page :is(a,button,input,select):focus-visible { outline: 3px solid var(--rr-cyan-shade); outline-offset: 4px; }
.rf-resource-hero { padding: 64px 0 56px; }
.rf-resource-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.rf-resource-intro h1 { font-size: clamp(40px,4.7vw,66px); max-width: 15ch; margin: 18px 0 24px; }
.rf-resource-intro p { font-size: 19px; max-width: 48ch; }
.rf-resource-intro figure { margin: 0; position: relative; }
.rf-resource-intro img { width: 100%; height: 380px; object-fit: cover; border-radius: 16px; }
.rf-resource-intro figcaption { text-align: center; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.rf-resource-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rf-resource-jump a { font-size: 14px; font-weight: 600; padding: 10px 15px; border: 1px solid var(--rr-steel); border-radius: 8px; background: white; }
.rf-resource-section { padding: 54px 0 64px; border-top: 1px solid var(--rr-mist); scroll-margin-top: 90px; }
.rf-resource-section h2 { font-size: clamp(28px,3vw,40px); }
.rf-resource-section .rf-resource-lede { margin: 14px 0 32px; max-width: 70ch; }
.rf-resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.rf-resource-card { background: white; border: 1px solid var(--rr-mist); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; }
.rf-resource-card .resource-type { font-size: 13px; color: var(--rr-cyan-ink); font-weight: 600; margin-bottom: 14px; }
.rf-resource-card h3 { font-size: 23px; margin-bottom: 14px; }
.rf-resource-card p { max-width: 55ch; margin-bottom: 24px; }
.rf-resource-card a { margin-top: auto; color: var(--rr-cyan-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.rf-resource-feature { background: var(--rr-deep); border-radius: 18px; padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.rf-resource-feature h3 { color: white; font-size: 30px; }
.rf-resource-feature p { color: #dce7f0; margin: 18px 0 24px; }
.rf-resource-feature img { height: 240px; width: 100%; object-fit: cover; border-radius: 12px; }
.rf-resources-page.rf-readiness-page { --violet: #00B8D6; --bg: #0A2236; --surface: #18324A; --surface-2: #21415b; --ink-light: #0A2236; --body-light: #18324A; --accent-light-text: #006A80; }
.rf-readiness-page .nav { background: #fff; }
.rf-readiness-page .hero { min-height: 0; padding: 60px 0; }
.rf-readiness-page .hero-figure-img { border-radius: 18px; object-fit: cover; }
.rf-readiness-page .footer h4, .rf-readiness-page .footer p, .rf-readiness-page .footer a { color: var(--rr-deep); }
.rf-readiness-page .nav .nav-logo { color: var(--rr-deep); }
@media (max-width: 880px) {
  .rf-resource-intro { grid-template-columns: 1fr; gap: 28px; }
  .rf-resource-intro h1 { max-width: 18ch; }
  .rf-resource-intro img { height: 270px; }
  .rf-resource-hero { padding: 36px 0; }
  .rf-resource-feature { grid-template-columns: 1fr; padding: 26px; }
}
@media (max-width: 600px) {
  .rf-resources-page :is(.prose,.article-body,.setup-step-text) p { text-align: left; }
  .rf-resources-page .shelf-hero-media { order: 0; }
  .rf-resources-page .shelf-hero-media img { max-height: 360px; }
  .rf-resource-grid { grid-template-columns: 1fr; }
  .rf-resource-card { padding: 24px; }
  .rf-resource-section { padding: 38px 0; }
}
@media print { .rf-resources-page > .nav, .rf-resources-page > .footer { display: none !important; } }

/* Editorial system: same paper, ink, type and cyan as the main site. */
body.rf-resources-page {
  --claude-orange: #006A80;
  --claude-orange-deep: #0A2236;
  --claude-orange-soft: #EAF7FA;
  --claude-orange-border: #C7E5EC;
  --claude-gradient: linear-gradient(135deg, #00B8D6, #0A2236);
  --acc: #006A80;
  --lvl-violet: #006A80;
  --violet: #006A80;
  background-color: var(--rr-paper);
}
body.rf-resources-page::before { opacity: .42; height: 680px; }
body.rf-resources-page.uc-page::after { display: none; }
body.rf-readiness-page.theme-light { background: var(--rr-paper); }
body.rf-readiness-page:not(.theme-light) { background: var(--rr-deep); }
.rf-resources-page .breadcrumb { padding: 25px 32px 0; font-size: 12px; }
.rf-resources-page .uc-hero { padding-top: 36px; padding-bottom: 56px !important; }
.rf-resources-page .article-hero-layout, .rf-resources-page .shelf-hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 56px; }
.rf-resources-page .article-head { padding: 18px 0; }
.rf-resources-page .article-head h1, .rf-resources-page .shelf-hero-text h1 { font-size: clamp(34px,3.65vw,52px); line-height: 1.1; letter-spacing: -.035em; max-width: 21ch; margin: 16px 0 20px; }
.rf-resources-page .article-head h1 .grad-text, .rf-resources-page .shelf-hero-text h1 .grad-text { color: var(--rr-deep); -webkit-text-fill-color: var(--rr-deep); }
.rf-resources-page .article-head .eyebrow { background: none; border: 0; padding: 0; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--rr-cyan-ink); }
.rf-resources-page .article-head .eyebrow .dot { background: var(--rr-cyan-shade); box-shadow: none; }
.rf-resources-page .article-lede { font-size: 18px; line-height: 1.65; text-align: left; max-width: 52ch; }
.rf-resources-page .article-subtitle { color: var(--rr-cyan-ink); font-size: 16px; line-height: 1.5; }
.rf-resources-page .article-date { border-color: var(--rr-mist); font-family: var(--font-sans); letter-spacing: 0; font-size: 12px; line-height: 1.5; margin-top: 24px; padding-top: 16px; }
.rf-resources-page .article-shell { border-top: 1px solid var(--rr-mist); padding-top: 30px; }
.rf-resources-page .article-body :is(.prose p,.l-body,.analogy-intro,.analogy-lead) { text-align: left; }
.rf-resources-page .title-hand-line::after { display: none; }
.rf-resources-page .article-body :is(h2,h3), .rf-resources-page .title-hand-line { font-family: var(--font-display); }
.rf-resources-page .article-toc-list a.is-active { color: var(--rr-cyan-ink); border-color: var(--rr-cyan-shade); }
.rf-resources-page .article-figure { width: 100%; margin: 0; }
.rf-resources-page .shelf-hero-media img { width: 100%; max-height: 420px; object-fit: cover; object-position: center 40%; border-radius: 16px; }
.rf-resources-page .res-grid { gap: 24px; }
.rf-resources-page .res-card { border-color: var(--rr-mist); box-shadow: none; transition: border-color .2s; }
.rf-resources-page .res-card:hover { transform: none; box-shadow: none; }
.rf-resources-page .res-card-banner { padding: 14px; background: var(--rr-deep); }
.rf-resources-page .res-card-banner img { width: 100%; height: 162px; object-fit: contain; border-radius: 6px; background: #fff; }
.rf-resources-page .res-card-banner::after { display: none; }
.rf-resources-page .res-card.has-banner:hover .res-card-banner img { transform: none; }
.rf-resources-page .res-card-body { margin: 0; padding: 24px; }
.rf-resources-page .res-card.has-banner h3 { font-size: 18px; line-height: 1.35; }
.rf-resources-page .res-card-headline { flex-direction: column; gap: 12px; }
.rf-resources-page .res-card-headline .stars { color: var(--rr-cyan-ink); background: var(--rr-paper); border: 0; padding: 0; }
.rf-resources-page .res-author { font-family: var(--font-sans); }
.rf-resources-page .res-card-body > p:not(.res-author) { font-size: 14px; line-height: 1.65; }
.rf-resources-page .res-btn.primary { background: var(--rr-deep); box-shadow: none; }
.rf-resources-page .sfc-gate-card { border-radius: 16px; border-top: 4px solid var(--rr-cyan); }
.rf-resources-page .sfc-gate-eyebrow { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; background: none; border: 0; }
.rf-resources-page .sfc-gate-eyebrow .dot { box-shadow: none; }
.rf-resources-page .sfc-gate-btn { color: var(--rr-deep); background: var(--rr-cyan); box-shadow: none; }
.rf-resources-page .sfc-gate-card h2 .accent, .rf-resources-page .sfc-gate-consent a { color: var(--rr-cyan-ink); }
.rf-resources-page .rf-method-visual { display: block; background: var(--rr-deep); color: #fff; border: 1px solid var(--rr-hull); border-radius: 16px; overflow: hidden; }
.rf-method-header { display: flex; justify-content: space-between; align-items: center; padding: 17px 26px; border-bottom: 1px solid #294359; font-size: 12px; color: #c7d8e6; }
.rf-method-mark { color: var(--rr-cyan); font-size: 26px; font-weight: 800; line-height: 1; }
.rf-method-content { padding: 26px; }
.rf-resources-page .rf-method-kicker { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 500; color: #89d5e5; margin: 0 0 12px; }
.rf-resources-page .rf-method-content h2 { font-size: clamp(24px,2.3vw,32px); color: white; line-height: 1.18; letter-spacing: -.025em; margin: 0 0 24px; }
.rf-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #355064; border: 1px solid #355064; border-radius: 10px; overflow: hidden; }
.rf-method-grid > span { display: flex; flex-direction: column; padding: 14px 17px; gap: 3px; font-size: 12px; background: #153247; color: #b8ccdb; }
.rf-method-grid b { color: #fff; font-weight: 600; font-size: 16px; }
.rf-resources-page .rf-method-visual > figcaption { padding: 16px 26px; border-top: 1px solid #294359; margin: 0; text-align: left; font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: #b8ccdb; }
.rf-resources-page .rf-agent-visual { display: block; border-radius: 16px; overflow: hidden; background: var(--rr-deep); }
.rf-agent-visual > img { width: 100%; height: 250px; object-fit: cover; }
.rf-resources-page .rf-agent-visual figcaption { text-align: left; margin: 0; padding: 24px 28px; color: #b8ccdb; font-family: var(--font-sans); font-size: 12px; }
.rf-agent-visual figcaption > span { display: block; }
.rf-agent-visual figcaption strong { display: block; color: white; font-size: 27px; line-height: 1.2; letter-spacing: -.02em; margin: 10px 0 16px; }
.rf-levels { list-style: none; padding: 0; margin: 0; }
.rf-levels li { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 20px 0; }
.rf-levels li + li { border-top: 1px solid #355064; }
.rf-level-number { display: grid; place-items: center; flex: 0 0 34px; height: 34px; background: #153e50; color: #00DCFF; border: 1px solid #2c5e71; border-radius: 8px; font-family: var(--font-mono); font-size: 15px; }
.rf-levels strong { display: block; color: white; font-size: 17px; font-weight: 600; line-height: 1.3; }
.rf-resources-page .rf-levels p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #b8ccdb; }
.rf-resources-page .claude-mock { background: var(--rr-deep); border: 1px solid var(--rr-hull); border-radius: 16px; box-shadow: none; }
.rf-prompt-demo-label { color: #b8ccdb; font-size: 13px; }
.rf-resources-page .cm-composer { border-color: #355064; background: #fff; box-shadow: none; border-radius: 10px; }
.rf-resources-page .cm-chips { display: none; }
.rf-resources-page .cm-greet { justify-content: flex-start; margin: 0 0 22px; }
.rf-resources-page .hero-figure-img { box-shadow: none; }
.rf-readiness-page.theme-light .hero-eyebrow { color: var(--rr-cyan-ink); }
@media (max-width: 1080px) {
  .rf-resources-page .article-shell { padding-top: 0; }
  .rf-resources-page .article-toc { top: 72px; }
}
@media (max-width: 920px) {
  .rf-resources-page .article-hero-layout, .rf-resources-page .shelf-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .rf-resources-page .article-figure { max-width: 620px; }
  .rf-resources-page .article-head h1 { max-width: 22ch; }
}
@media (max-width: 600px) {
  .rf-resources-page .breadcrumb { padding: 22px 20px 0; }
  .rf-resources-page .uc-hero { padding-top: 18px; padding-bottom: 32px !important; }
  .rf-resources-page .article-head h1, .rf-resources-page .shelf-hero-text h1 { font-size: 34px; }
  .rf-resources-page .article-lede { font-size: 17px; }
  .rf-method-content { padding: 22px; }
  .rf-method-header { padding: 16px 22px; }
  .rf-agent-visual > img { height: 200px; }
  .rf-resources-page .res-card-banner img { height: 155px; }
}

.rf-resources-page .agent-avatar { border: 1px solid var(--rr-steel); border-radius: 8px; box-shadow: none; }

/* A few field-notebook touches, chosen in the markup for editorial emphasis. */
@font-face {
  font-family: 'RF Field Notes';
  src: url('/assets/fonts/caveat-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.rf-resources-page { --font-notes: 'RF Field Notes', 'Segoe Print', cursive; }
.rf-resources-page .article-body h2.rf-hand-title,
.rf-resources-page h2.rf-hand-title,
.rf-resources-page .rf-resource-section h2.rf-hand-title {
  position: relative;
  display: inline-block;
  font-family: var(--font-notes);
  font-size: clamp(34px, 3.3vw, 46px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.12;
  color: var(--rr-deep);
  padding-bottom: 13px;
  max-width: 100%;
}
.rf-resources-page h2.rf-hand-title::before {
  content: '';
  position: absolute;
  left: 1px;
  bottom: 0;
  width: min(88%, 310px);
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 310 9' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q65 1 123 4 T233 4 Q274 2 307 4 M15 8 Q124 5 206 7' fill='none' stroke='%2300B8D6' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
  pointer-events: none;
}
.rf-resources-page .rf-field-note {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 7px 13px 8px 15px / 13px 7px 15px 8px;
  background: #eef8fb;
  box-shadow: none;
  padding: 26px 28px;
}
.rf-resources-page .rf-field-note::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cpath d='M12 5 Q180 2 308 5 T586 4 Q596 5 594 19 L596 179 Q596 195 584 194 Q396 198 301 194 T14 196 Q4 195 6 181 L4 20 Q3 7 12 5 Z' fill='none' stroke='%23577988' stroke-width='1.15' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.rf-resources-page .rf-field-note :is(.res-callout-label,.rc-tag),
.rf-resources-page .rf-field-note .pw-quote > strong:first-child {
  font-family: var(--font-notes);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rr-cyan-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.rf-resources-page .rf-field-note .pw-quote > strong:first-child { display: block; margin-bottom: 10px; }
.rf-resources-page .recipe-compare .rf-field-note { background: #fff; }
.rf-resources-page .recipe-compare .rf-field-note.rc-good { background: #eef8fb; }
.rf-resources-page .rf-field-note :is(p,.rc-note) { text-align: left; }
.rf-resources-page .rf-resource-intro > figure > figcaption {
  font-family: var(--font-notes);
  font-size: 24px;
  color: var(--rr-cyan-ink);
}
@media (max-width: 600px) {
  .rf-resources-page .rf-field-note { padding: 23px 21px; }
}

/* Blue-to-violet emphasis belongs to the resource hero headlines. */
.rf-resources-page h1 .grad-text,
.rf-resources-page .article-head h1 .grad-text,
.rf-resources-page .shelf-hero-text h1 .grad-text {
  color: #4059bd;
  -webkit-text-fill-color: currentColor;
  background: none;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .rf-resources-page h1 .grad-text,
  .rf-resources-page .article-head h1 .grad-text,
  .rf-resources-page .shelf-hero-text h1 .grad-text {
    background: linear-gradient(110deg, #0075ad 0%, #4059bd 48%, #7944b5 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}
@media (forced-colors: active) {
  .rf-resources-page h1 .grad-text,
  .rf-resources-page .article-head h1 .grad-text,
  .rf-resources-page .shelf-hero-text h1 .grad-text {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}
