/* simpleRaven site styles. Source of truth for every page.
   Tokens follow simpleraven-design/tokens.css. index.html carries an inline copy:
   after editing this file, run  python3 tools/sync_styles.py  */
:root {
  --sr-navy: #0F1E33;
  --sr-cream: #F2EFE9;
  --sr-slate: #3C4A5E;
  --sr-mist: #B8BFCB;
  --sr-body-on-navy: #C9CFD8;
  --sr-line-navy: #2A3F5C;
  --sr-line-cream: #C9CFD8;
  --sr-rule: 1.5px;
  --sr-divider: 1px;
  --sr-copper: #C97B4A;
  --sr-copper-text: #9A4F22;
  --sr-font: 'Figtree', system-ui, sans-serif;
  --sr-max: 1280px;
  --sr-gutter: 64px;
  --sr-section-y: 88px;
  --sr-col-gap: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sr-font);
  font-variant-numeric: tabular-nums;
  background: var(--sr-navy);
  color: var(--sr-cream);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── Section themes: every component reads these, so it works on navy or cream ── */
.on-navy, .on-cream { background: var(--bg); color: var(--fg); }
.on-navy {
  --bg: var(--sr-navy); --fg: var(--sr-cream); --text: var(--sr-body-on-navy); --muted: var(--sr-mist);
  --rule-c: var(--sr-cream); --line-c: var(--sr-line-navy);
}
.on-cream {
  --bg: var(--sr-cream); --fg: var(--sr-navy); --text: var(--sr-slate); --muted: var(--sr-slate);
  --rule-c: var(--sr-navy); --line-c: var(--sr-line-cream);
}

.section, .nav, .footer { --pad-x: max(var(--sr-gutter), calc((100% - var(--sr-max)) / 2 + var(--sr-gutter))); }
.section { display: flex; flex-direction: column; gap: 48px; padding: var(--sr-section-y) var(--pad-x); }
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sr-col-gap); }

.eyebrow { font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.h1 { font-weight: 600; font-size: 64px; line-height: 1.06; letter-spacing: -0.025em; }
.h2 { font-weight: 600; font-size: 40px; line-height: 1.12; letter-spacing: -0.015em; }
.lead { font-size: 20px; line-height: 1.6; color: var(--text); max-width: 640px; }
.body { font-size: 18px; line-height: 1.65; color: var(--text); max-width: 680px; }

/* ── Buttons and links ── */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; font-weight: 700; font-size: 16px; text-decoration: none; border: 0; border-radius: 0; cursor: pointer; background: var(--fg); color: var(--bg); }
.btn:hover { opacity: 0.88; }
.btn-outline { height: 44px; padding: 0 20px; font-weight: 600; background: transparent; border: 1.5px solid var(--sr-cream); color: var(--sr-cream); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }
.text-link:hover { color: var(--muted); }

/* ── Nav ── */
.nav { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 26px var(--pad-x); border-bottom: 1px solid var(--sr-line-navy); }
.nav-logo { display: flex; align-items: center; min-height: 44px; }
.nav-logo img { height: 38px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 500; }
.nav-links > a:not(.btn), .nav-drop-btn { color: var(--sr-body-on-navy); text-decoration: none; }
.nav-links > a:not(.btn):hover, .nav-drop-btn:hover { color: var(--sr-cream); }
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; font-size: 15px; font-weight: 500; cursor: pointer; }
.nav-drop-btn .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: -20px; min-width: 260px; padding: 8px 20px; background: var(--sr-cream); color: var(--sr-navy); border-top: var(--sr-rule) solid var(--sr-navy); }
.nav-drop-menu a { display: flex; align-items: center; min-height: 48px; font-size: 15px; text-decoration: none; border-top: 1px solid var(--sr-line-cream); }
.nav-drop-menu a:first-child { border-top: 0; }
.nav-drop-menu a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-drop.is-open .nav-drop-menu { display: block; }
@media (hover: hover) {
  .nav-drop:hover .nav-drop-menu { display: block; }
}
.nav-toggle { display: none; align-items: center; height: 44px; padding: 0 16px; background: transparent; border: 1.5px solid var(--sr-cream); font-weight: 600; font-size: 15px; cursor: pointer; }
.mobile-menu { display: none; }

/* ── Hero ── */
/* Fixed minimum height, shared by every page's hero, so moving between pages doesn't shift the layout */
.hero { display: grid; min-height: 680px; padding-top: 104px; padding-bottom: 96px; align-items: end; }
.hero-copy { grid-column: span 8; display: flex; flex-direction: column; gap: 28px; }
.hero-mark { grid-column: 10 / span 3; display: flex; justify-content: flex-end; }
.hero-mark img { width: 260px; opacity: 0.9; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 4px; }

/* ── Ruled columns: shared by the advantages, questions and services.
      Each column is a subgrid, so matching rows (and their rules) line up across columns. ── */
.cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); border-top: var(--sr-rule) solid var(--rule-c); }
.cols-3 { --n: 3; }
.cols-4 { --n: 4; }
.col { display: grid; grid-row: span var(--rows); grid-template-rows: subgrid; row-gap: 14px; align-content: start; padding: 28px 32px 8px; border-left: 1px solid var(--line-c); }
.col:first-child { padding-left: 0; border-left: 0; }
.col:last-child { padding-right: 0; }
.col-num { font-size: 15px; font-weight: 700; color: var(--muted); }
.col-title { font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.col-text { font-size: 16px; line-height: 1.6; color: var(--text); }
.col-hear { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); }
.col-hear-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.col-hear-text { font-size: 16px; line-height: 1.55; color: var(--fg); }
.note { font-size: 16px; line-height: 1.6; color: var(--text); max-width: 760px; }

/* ── How we work: nodes joined by a line that runs node to node ── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sr-col-gap); }
.step { display: flex; flex-direction: column; gap: 14px; }
.step-head { display: flex; align-items: center; }
.step:not(:last-child) .step-head::after { content: ""; flex: 1; height: 1.5px; background: var(--rule-c); margin: 0 calc(-1 * var(--sr-col-gap) / 2) 0 16px; }
.node { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; font-weight: 600; border: 1.5px solid var(--rule-c); }
.step-title { font-weight: 600; font-size: 19px; }
.step-text { font-size: 15px; line-height: 1.6; color: var(--text); }

/* ── Ruled row lists: industries and Thought Starters ── */
.rows { display: flex; flex-direction: column; border-bottom: var(--sr-rule) solid var(--rule-c); }
.row { display: grid; grid-template-columns: 4fr 7fr 1fr; column-gap: var(--sr-col-gap); align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line-c); text-decoration: none; color: var(--fg); }
.row:first-child { border-top: var(--sr-rule) solid var(--rule-c); }
.row-name { font-size: 22px; font-weight: 600; line-height: 1.35; }
.row-desc { font-size: 15px; line-height: 1.55; color: var(--text); }
.row-meta { font-size: 14px; color: var(--muted); }
.arrow { font-size: 18px; text-align: right; }
a.row:hover .row-name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.row-ask { grid-column: 1 / -1; display: block; font-size: 16px; color: var(--text); }
.row-ask a { color: var(--fg); text-underline-offset: 4px; }
.ts-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* ── Closing conversation ── */
.talk { display: grid; padding-top: 96px; padding-bottom: 96px; row-gap: 48px; align-items: start; }
.talk-copy { grid-column: span 6; display: flex; flex-direction: column; gap: 20px; }
.talk-h { font-weight: 600; font-size: 52px; line-height: 1.08; letter-spacing: -0.02em; }
.talk-email { font-size: 15px; color: var(--text); }
.talk-form { grid-column: 8 / span 5; }

.form { display: flex; flex-direction: column; border-top: var(--sr-rule) solid var(--rule-c); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line-c); }
.field label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { width: 100%; height: 44px; padding: 0 12px; font: 400 16px var(--sr-font); color: var(--fg); background-color: transparent; border: 1px solid var(--muted); border-radius: 0; -webkit-appearance: none; appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field select option { color: var(--sr-navy); background: var(--sr-cream); }
.field input:focus, .field select:focus { outline: 2px solid var(--fg); outline-offset: 0; border-color: var(--fg); }
.form-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.form-foot .btn { align-self: flex-start; }
.form-note { font-size: 14px; line-height: 1.5; color: var(--text); }
.form-error { font-size: 15px; color: var(--fg); }
.form-success { display: none; padding: 24px 0; border-top: var(--sr-rule) solid var(--rule-c); border-bottom: var(--sr-rule) solid var(--rule-c); }
.form-success-title { font-size: 22px; font-weight: 600; margin-bottom: 8px; }

/* ── Footer ── */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: 26px var(--pad-x); font-size: 14px; color: var(--sr-body-on-navy); border-top: 1px solid var(--sr-line-navy); }
.footer-id { display: flex; align-items: center; gap: 14px; }
.footer-id img { height: 30px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-links a:hover { color: var(--sr-cream); text-decoration: underline; }

/* ── Mid widths ── */
@media (max-width: 1100px) {
  .hero { min-height: 740px; }
  .cols-4 { --n: 2; }
  .cols-4 .col { grid-row: auto; display: flex; flex-direction: column; padding: 28px 0 8px; border-left: 0; }
  .cols-4 { grid-template-rows: none; row-gap: 16px; column-gap: var(--sr-col-gap); }
  .cols-4 .col:nth-child(n+3) { border-top: 1px solid var(--line-c); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .step .step-head::after { display: none; }
  .talk-copy { grid-column: span 12; }
  .talk-form { grid-column: span 12; max-width: 640px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--sr-navy); border-bottom: var(--sr-rule) solid var(--sr-cream); padding: 8px var(--pad-x) 24px; }
  .mobile-menu a { display: flex; align-items: center; min-height: 52px; font-size: 18px; font-weight: 500; text-decoration: none; border-top: 1px solid var(--sr-line-navy); }
  .mobile-menu a:first-child { border-top: 0; }
  .mobile-menu .sub { padding-left: 20px; font-size: 16px; color: var(--sr-body-on-navy); min-height: 48px; }
  .mobile-menu .btn { --bg: var(--sr-navy); --fg: var(--sr-cream); justify-content: center; margin-top: 16px; border-top: 0; font-size: 16px; font-weight: 700; }
  .hero-copy { grid-column: span 9; }
  .hero-mark img { width: 180px; }
  .cols-3 { --n: 1; grid-template-rows: none; }
  .cols-3 .col, .cols-3 .col:first-child, .cols-3 .col:last-child { grid-row: auto; display: flex; flex-direction: column; padding: 24px 0; border-left: 0; border-top: 1px solid var(--line-c); }
  .cols-3 .col:first-child { border-top: 0; }
}

/* ── Phones ── */
@media (max-width: 767px) {
  :root { --sr-gutter: 20px; --sr-section-y: 56px; }
  .section { gap: 32px; }
  .nav { padding-top: 16px; padding-bottom: 16px; }
  .nav-logo img { height: 30px; }
  .h1 { font-size: 40px; line-height: 1.1; }
  .h2 { font-size: 30px; line-height: 1.18; }
  .talk-h { font-size: 34px; line-height: 1.12; }
  .lead { font-size: 18px; }
  .body { font-size: 17px; }

  .hero { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 28px; min-height: 0; padding-top: 40px; padding-bottom: 56px; }
  .hero-copy { gap: 22px; }
  .hero-mark { justify-content: flex-start; }
  .hero-mark img { width: 120px; }
  .cta-row .btn { width: 100%; }

  .col-title { font-size: 21px; }
  .cols-4 { --n: 1; }
  .cols-4 .col:nth-child(n+2) { border-top: 1px solid var(--line-c); }

  .steps { grid-template-columns: 1fr; row-gap: 32px; }
  .step { position: relative; padding-left: 72px; gap: 8px; }
  .step .node { position: absolute; z-index: 1; left: 0; top: -6px; background: var(--bg); }
  .step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: -32px; width: 1.5px; background: var(--rule-c); }

  .row { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 6px; }
  .row > :not(.arrow) { grid-column: 1; }
  .row .arrow { grid-column: 2; grid-row: 1; }
  .row-name { font-size: 19px; }
  .ts-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  .talk { display: flex; flex-direction: column; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  .form-row { grid-template-columns: 1fr; }
  .form-foot .btn { align-self: stretch; }

  .footer { flex-direction: column; align-items: flex-start; }
}

/* ── Industry pages ── */
.phases { display: flex; flex-direction: column; border-bottom: var(--sr-rule) solid var(--rule-c); }
.phase { border-top: 1px solid var(--line-c); }
.phase:first-child { border-top: var(--sr-rule) solid var(--rule-c); }
.phase > summary { list-style: none; display: grid; grid-template-columns: 64px minmax(0, 1fr) 180px; column-gap: var(--sr-col-gap); align-items: baseline; padding: 24px 0; cursor: pointer; }
.phase > summary::-webkit-details-marker { display: none; }
.phase-num { font-size: 15px; font-weight: 700; color: var(--muted); }
.phase-title { display: block; font-size: 22px; font-weight: 600; line-height: 1.3; }
.phase-desc { display: block; margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--text); max-width: 680px; }
.phase-toggle { justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.phase-toggle::after { content: "+"; font-size: 20px; font-weight: 400; width: 14px; text-align: center; }
.phase[open] .phase-toggle::after { content: "−"; }
.phase-toggle .when-open { display: none; }
.phase[open] .phase-toggle .when-open { display: inline; }
.phase[open] .phase-toggle .when-closed { display: none; }
.phase > summary:hover .phase-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.apps { display: flex; flex-direction: column; margin: 0 0 28px calc(64px + var(--sr-col-gap)); max-width: 760px; }
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; padding: 14px 0; border-top: 1px solid var(--line-c); font-size: 15px; line-height: 1.55; }
.app-name { font-weight: 600; }
.app-text { color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(3, auto); border-top: var(--sr-rule) solid var(--rule-c); }
.stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; padding: 28px 32px 8px; border-left: 1px solid var(--line-c); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat:last-child { padding-right: 0; }
.stat-num { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.stat-title { font-size: 21px; font-weight: 600; line-height: 1.3; }
.stat-text { font-size: 15px; line-height: 1.55; color: var(--text); }
.stat-source { font-size: 13px; color: var(--muted); }
.stat-source a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.close-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
@media (max-width: 1100px) {
  .stats { --n: 2 !important; grid-template-rows: none; row-gap: 16px; column-gap: var(--sr-col-gap); }
  .stat, .stat:first-child, .stat:last-child { grid-row: auto; display: flex; flex-direction: column; padding: 28px 0 8px; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-c); }
}
@media (max-width: 767px) {
  .phase > summary { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .phase-toggle { grid-column: 2; justify-self: start; }
  .phase-title { font-size: 19px; }
  .apps { margin-left: calc(40px + var(--sr-col-gap)); }
  .app { grid-template-columns: 1fr; row-gap: 4px; }
  .stats { --n: 1 !important; }
  .stat:nth-child(n+2) { border-top: 1px solid var(--line-c); }
  .stat-num { font-size: 36px; }
  .close-row .btn { width: 100%; }
}

/* ── About page ── */
.about-rows { display: flex; flex-direction: column; border-bottom: var(--sr-rule) solid var(--rule-c); }
.about-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sr-col-gap); padding: 32px 0 40px; border-top: 1px solid var(--line-c); }
.about-row:first-child { border-top: var(--sr-rule) solid var(--rule-c); }
.about-h { grid-column: span 5; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.about-text { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 18px; }
.about-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
@media (max-width: 767px) {
  .about-row { display: flex; flex-direction: column; gap: 16px; padding: 24px 0 32px; }
  .about-h { font-size: 22px; }
  .about-close .btn { width: 100%; }
}

/* ── Thought Starters listing ── */
.schedule { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--sr-rule) solid var(--rule-c); border-bottom: 1px solid var(--line-c); }
.schedule-day { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 16px 0; }
.schedule-day + .schedule-day { padding-left: 20px; border-left: 1px solid var(--line-c); }
.schedule-name { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.schedule-cat { font-size: 16px; font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; background: transparent; color: var(--fg); border: 1px solid var(--fg); border-radius: 0; cursor: pointer; }
.filter-btn:hover { background: rgba(15, 30, 51, 0.06); }
.filter-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.filter-count { font-weight: 400; opacity: 0.75; }
.coming { padding: 14px 0; border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); font-size: 15px; line-height: 1.55; color: var(--text); }
.coming strong { color: var(--fg); }
.post-main { display: flex; flex-direction: column; gap: 6px; }
.post-sub { font-size: 15px; line-height: 1.55; color: var(--text); }
.post-end { display: flex; align-items: baseline; justify-content: flex-end; gap: 16px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.post-end .arrow { color: var(--fg); }
.rows .row.post-row { grid-template-columns: 3fr 7fr 2fr; }
@media (max-width: 767px) {
  .schedule { grid-template-columns: 1fr; }
  .schedule-day, .schedule-day + .schedule-day { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 12px 0; border-left: 0; }
  .schedule-day + .schedule-day { border-top: 1px solid var(--line-c); }
  .rows .row.post-row { grid-template-columns: minmax(0, 1fr); }
  .post-end { grid-row: auto; grid-column: 1; justify-content: space-between; }
}

/* ── Thought Starter post pages ── */
.post-head { gap: 40px; padding-top: 48px; padding-bottom: 80px; }
.post-back { align-self: flex-start; font-size: 15px; color: var(--text); }
.post-head-copy { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.post-title { font-weight: 600; font-size: 52px; line-height: 1.08; letter-spacing: -0.02em; }
.post-meta { font-size: 14px; color: var(--muted); }
.post-section { gap: 64px; }
.post-body { max-width: 680px; font-size: 18px; line-height: 1.7; color: var(--text); }
.post-body p { margin: 0 0 1.25em; }
.post-body p:last-child { margin-bottom: 0; }
.post-body strong { color: var(--fg); font-weight: 600; }
.post-body code { font-family: inherit; font-weight: 600; color: var(--fg); }
.post-body a { color: var(--fg); text-underline-offset: 3px; }
.post-end-block { display: flex; flex-direction: column; gap: 48px; max-width: 820px; }
.post-cta { padding-top: 24px; border-top: var(--sr-rule) solid var(--rule-c); align-items: center; }
.post-cta-text { font-size: 22px; font-weight: 600; line-height: 1.3; }
.post-related .rows .row { grid-template-columns: 4fr 7fr 1fr; }
@media (max-width: 767px) {
  .post-head { gap: 28px; padding-top: 32px; padding-bottom: 56px; }
  .post-title { font-size: 34px; line-height: 1.12; }
  .post-body { font-size: 17px; }
  .post-cta .btn { width: 100%; }
}