/* ==========================================================================
   Greens Logistics — RoRo programmatic pages
   ONE design system · ONE outer layout · THREE content compositions

   Page type is set on the outer wrapper:
     .roro-page--standard-vehicle
     .roro-page--heavy-equipment
     .roro-page--commercial-transport

   Every content block keeps the same markup and the same component design.
   Only its POSITION and WIDTH change, via the composition maps in §9.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — light theme
   Colours are identical for all three page types (ТЗ §11).
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --c-bg:            #f2f6f3;
  --c-surface:       #ffffff;
  --c-surface-2:     #e6efe9;
  --c-ink:           #12201a;
  --c-ink-2:         #51625a;
  --c-line:          #d6e2db;
  --c-line-strong:   #b9cdc1;

  --c-brand:         #1d6f4e;
  --c-brand-ink:     #0d3a28;
  --c-brand-soft:    rgba(29, 111, 78, .10);

  --c-accent:        #e3a81f;
  --c-accent-hover:  #f0bb3c;
  --c-accent-ink:    #281d03;

  --c-header-bg:     #0d3a28;
  --c-header-ink:    #cbe2d5;
  --c-hero-bg:       #e6efe9;
  --c-hero-ink:      #0d3a28;
  --c-highlight-bg:  #fff7e3;
  --c-highlight-line:#e3a81f;

  --shadow-sm: 0 1px 2px rgba(13, 58, 40, .06);
  --shadow-md: 0 1px 2px rgba(13, 58, 40, .05), 0 16px 36px -22px rgba(13, 58, 40, .35);

  /* Typography */
  --font-base: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-body:   1.0625rem;
  --fs-small:  .9rem;
  --fs-h1:     clamp(2.1rem, 1.3rem + 3vw, 3.5rem);
  --fs-h2:     clamp(1.4rem, 1.15rem + .95vw, 1.9rem);
  --fs-h3:     1.1rem;
  --fs-lead:   clamp(1.06rem, 1rem + .3vw, 1.2rem);

  /* Layout */
  --shell:      1220px;
  --gutter:     24px;
  --gap-grid:   28px;
  --gap-section:72px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

/* 2. Design tokens — dark theme -------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:            #0a1410;
  --c-surface:       #11201a;
  --c-surface-2:     #16281f;
  --c-ink:           #e2ede7;
  --c-ink-2:         #97ada1;
  --c-line:          #22382d;
  --c-line-strong:   #35513f;

  --c-brand:         #4ec28b;
  --c-brand-ink:     #bfe8d4;
  --c-brand-soft:    rgba(78, 194, 139, .13);

  --c-accent:        #e8b134;
  --c-accent-hover:  #f4c44f;
  --c-accent-ink:    #211903;

  --c-header-bg:     #06100b;
  --c-header-ink:    #b2cabb;
  --c-hero-bg:       #0e2018;
  --c-hero-ink:      #e7f2ec;
  --c-highlight-bg:  #29230f;
  --c-highlight-line:#e8b134;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -24px rgba(0, 0, 0, .85);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

img, svg { max-width: 100%; }

a { color: var(--c-brand); text-underline-offset: .18em; }
a:hover { color: var(--c-brand-ink); }

:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.roro-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.roro-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 4. Typography system — identical on all three page types (ТЗ §2, §4) ------ */
h1, h2, h3 { margin: 0; line-height: 1.16; letter-spacing: -.015em; }
h1 { font-size: var(--fs-h1); font-weight: 800; margin-bottom: .4em; }
h2 { font-size: var(--fs-h2); font-weight: 750; margin-bottom: .65em; }
h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: .45em; }

p { margin: 0 0 1em; }
strong { font-weight: 650; }

.roro-lead { font-size: var(--fs-lead); line-height: 1.55; }
.roro-muted { color: var(--c-ink-2); }
.roro-note { font-size: var(--fs-small); color: var(--c-ink-2); }

/* Rich text coming from the content generator (body_html) */
.roro-rte > *:last-child { margin-bottom: 0; }
.roro-rte p { max-width: 68ch; }
.roro-rte ul, .roro-rte ol { margin: 0 0 1em; padding-left: 1.25em; }
.roro-rte li { margin: .3em 0; }

/* --------------------------------------------------------------------------
   5. Header · navigation · footer — identical everywhere (ТЗ §2)
   -------------------------------------------------------------------------- */
.roro-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-header-bg); color: #fff;
}
.roro-header__inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }

.roro-brand {
  display: flex; align-items: center; gap: 10px; margin-right: auto;
  color: #fff; text-decoration: none; font-weight: 750; letter-spacing: .03em;
}
.roro-brand:hover { color: #fff; }
.roro-brand__mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 9px; background: var(--c-brand); color: #fff;
  font-weight: 800; font-size: .95rem;
}

.roro-nav { display: flex; gap: 26px; }
.roro-nav a { color: var(--c-header-ink); text-decoration: none; font-size: .95rem; }
.roro-nav a:hover { color: #fff; }

.roro-header__tools { display: flex; align-items: center; gap: 10px; }

.roro-theme-toggle {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.roro-theme-toggle:hover { background: rgba(255,255,255,.09); }
.roro-theme-toggle svg { width: 19px; height: 19px; }
.roro-theme-toggle .roro-i-sun { display: none; }
:root[data-theme="dark"] .roro-theme-toggle .roro-i-sun  { display: block; }
:root[data-theme="dark"] .roro-theme-toggle .roro-i-moon { display: none; }

.roro-footer {
  background: var(--c-header-bg); color: var(--c-header-ink);
  padding: 40px 0; font-size: .95rem;
}
.roro-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.roro-footer__name { color: #fff; font-weight: 750; }

@media (max-width: 860px) { .roro-nav { display: none; } }
@media (max-width: 480px) {
  .roro-header__inner { gap: 10px; }
  .roro-brand { font-size: .82rem; gap: 8px; }
  .roro-brand__mark { width: 32px; height: 32px; }
  .roro-header__tools .roro-btn { padding: 9px 13px; font-size: .85rem; }
}

/* 6. Buttons & links — one system (ТЗ §2) ---------------------------------- */
.roro-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: 0; border-radius: var(--radius-pill);
  background: var(--c-accent); color: var(--c-accent-ink);
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.roro-btn:hover { background: var(--c-accent-hover); color: var(--c-accent-ink); }
.roro-btn:active { transform: translateY(1px); }
.roro-btn--ghost {
  background: transparent; color: var(--c-hero-ink);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.roro-btn--ghost:hover { background: var(--c-brand-soft); color: var(--c-hero-ink); }
.roro-btn--block { width: 100%; }

/* 7. Breadcrumbs ----------------------------------------------------------- */
.roro-breadcrumbs { font-size: var(--fs-small); color: var(--c-hero-ink); margin-bottom: 22px; }
.roro-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.roro-breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .45; }
.roro-breadcrumbs a { color: inherit; text-decoration: none; opacity: .78; }
.roro-breadcrumbs a:hover { opacity: 1; text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. HERO — same structure for all three page types (ТЗ §3)
   H1 · short intro · CTA · route/destination summary
   -------------------------------------------------------------------------- */
.roro-hero {
  position: relative; overflow: hidden;
  background: var(--c-hero-bg); color: var(--c-hero-ink);
  padding: 44px 0 56px;
}
.roro-hero::after {
  content: ""; position: absolute; right: -8%; bottom: -55%;
  width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--c-brand-soft), transparent);
}
.roro-hero__inner { position: relative; display: grid; gap: 44px; align-items: center; }
/* Two columns only when the route summary is present */
.roro-hero__inner:has(.roro-hero__route) { grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); }

.roro-hero__title { max-width: 17ch; }
.roro-hero__intro { max-width: 58ch; }
.roro-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Route / destination summary (component: Route summary) */
.roro-hero__route {
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 20px 22px 16px; box-shadow: var(--shadow-md);
}
.roro-hero__route svg { display: block; width: 100%; height: auto; overflow: visible; }
.roro-route-line { fill: none; stroke: var(--c-brand); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; }
.roro-route-dot { fill: var(--c-surface); stroke: var(--c-brand); stroke-width: 3; }
.roro-route-dot--end { fill: var(--c-accent); stroke: var(--c-accent); }
.roro-route-ship { fill: var(--c-brand); }
.roro-hero__route text { fill: var(--c-ink-2); font: 600 12px var(--font-base); }
.roro-hero__route text.is-strong { fill: var(--c-ink); font-weight: 800; font-size: 15px; }
.roro-hero__route dl { margin: 14px 0 0; display: grid; gap: 10px; font-size: .9rem; }
.roro-hero__route dl > div {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--c-line);
}
.roro-hero__route dt { color: var(--c-ink-2); }
.roro-hero__route dd { margin: 0; font-weight: 600; }

@media (max-width: 900px) {
  .roro-hero__inner:has(.roro-hero__route) { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   9. MAIN CONTENT GRID + the three composition maps (ТЗ §5, §6, §7, §10)
   The component design never changes — only span and order.
   -------------------------------------------------------------------------- */
.roro-main { padding: var(--gap-section) 0; }

.roro-main__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-grid);
  align-items: start;
}

/* Default: a block takes the full row until a composition map says otherwise */
.roro-block { grid-column: span 12; scroll-margin-top: 90px; }

/* A block left alone on its row (because its neighbour is missing) goes full
   width. The renderer adds this class, so a removed block never leaves a hole. */
.roro-block.is-full { grid-column: span 12 !important; }

/* A text-led block that occupies the full row reads better with the heading
   beside the prose than above a half-empty line length. One rule, applied the
   same way on all three page types. */
@media (min-width: 1000px) {
  .roro-main__grid > .roro-block.is-full.roro-block--text {
    display: grid;
    grid-template-columns: minmax(190px, 290px) minmax(0, 1fr);
    gap: 20px 56px;
    align-items: start;
  }
  .roro-main__grid > .roro-block.is-full.roro-block--text > h2 { margin-bottom: 0; }
}

/* --- 9.1 Standard Vehicle -------------------------------------------------
   INTRO · ROUTE FACTS | CARGO TYPES · ROUTE · CARGO REQ | DEPARTURE PORTS
   SERVICES | USA PICKUP · COST | TRANSIT · DOCUMENTS · PROCESS
   PORT | COUNTRY                                                            */
.roro-page--standard-vehicle .roro-block--route-facts      { grid-column: span 5; }
.roro-page--standard-vehicle .roro-block--cargo-types      { grid-column: span 7; }
.roro-page--standard-vehicle .roro-block--cargo-requirements{ grid-column: span 7; }
.roro-page--standard-vehicle .roro-block--departure-ports  { grid-column: span 5; }
.roro-page--standard-vehicle .roro-block--services         { grid-column: span 5; }
.roro-page--standard-vehicle .roro-block--usa-pickup       { grid-column: span 7; }
.roro-page--standard-vehicle .roro-block--cost-factors     { grid-column: span 6; }
.roro-page--standard-vehicle .roro-block--transit-time     { grid-column: span 6; }
.roro-page--standard-vehicle .roro-block--port-overview    { grid-column: span 6; }
.roro-page--standard-vehicle .roro-block--country-overview { grid-column: span 6; }

/* --- 9.2 Heavy Equipment --------------------------------------------------
   INTRO · CARGO TYPES · ROUTE FACTS | CARGO REQUIREMENTS
   RORO SUITABILITY | ROUTE · QUOTE REQUIREMENTS (technical table)
   COST | TRANSIT · DOCUMENTS · PROCESS · PORT | DEPARTURE · COUNTRY | PICKUP */
.roro-page--heavy-equipment .roro-block--route-facts       { grid-column: span 5; }
.roro-page--heavy-equipment .roro-block--cargo-requirements{ grid-column: span 7; }
.roro-page--heavy-equipment .roro-block--roro-suitability  { grid-column: span 7; }
.roro-page--heavy-equipment .roro-block--route             { grid-column: span 5; }
.roro-page--heavy-equipment .roro-block--cost-factors      { grid-column: span 6; }
.roro-page--heavy-equipment .roro-block--transit-time      { grid-column: span 6; }
.roro-page--heavy-equipment .roro-block--shipping-process  { grid-column: span 7; }
.roro-page--heavy-equipment .roro-block--services          { grid-column: span 5; }
.roro-page--heavy-equipment .roro-block--port-overview     { grid-column: span 7; }
.roro-page--heavy-equipment .roro-block--departure-ports   { grid-column: span 5; }
.roro-page--heavy-equipment .roro-block--country-overview  { grid-column: span 6; }
.roro-page--heavy-equipment .roro-block--usa-pickup        { grid-column: span 6; }

/* --- 9.3 Commercial Transport ---------------------------------------------
   INTRO · ROUTE | ROUTE FACTS · CARGO TYPES · SERVICES | USA PICKUP
   PORT | COUNTRY · CARGO REQUIREMENTS · SUITABILITY | DEPARTURE
   COST | TRANSIT · PROCESS · QUOTE REQUIREMENTS · DOCUMENTS               */
.roro-page--commercial-transport .roro-block--route            { grid-column: span 7; }
.roro-page--commercial-transport .roro-block--route-facts      { grid-column: span 5; }
.roro-page--commercial-transport .roro-block--services         { grid-column: span 5; }
.roro-page--commercial-transport .roro-block--usa-pickup       { grid-column: span 7; }
.roro-page--commercial-transport .roro-block--port-overview    { grid-column: span 6; }
.roro-page--commercial-transport .roro-block--country-overview { grid-column: span 6; }
.roro-page--commercial-transport .roro-block--roro-suitability { grid-column: span 7; }
.roro-page--commercial-transport .roro-block--departure-ports  { grid-column: span 5; }
.roro-page--commercial-transport .roro-block--cost-factors     { grid-column: span 6; }
.roro-page--commercial-transport .roro-block--transit-time     { grid-column: span 6; }

/* One column on small screens for every page type */
@media (max-width: 900px) {
  .roro-page .roro-block { grid-column: span 12; }
  :root { --gap-grid: 22px; --gap-section: 52px; }
}

/* --------------------------------------------------------------------------
   10. Universal content components (ТЗ §8)
   Each component has exactly ONE design, used by all three page types.
   -------------------------------------------------------------------------- */

/* 10.1 Content section — the default wrapper of every block */
.roro-block__body > *:last-child { margin-bottom: 0; }

/* 10.2 Info card / highlighted card */
.roro-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
}
.roro-card--highlight {
  background: var(--c-highlight-bg);
  border-color: var(--c-highlight-line);
  border-left-width: 4px;
}
.roro-card--plain { background: transparent; border: 0; box-shadow: none; padding: 0; }
.roro-card--spaced { margin-top: 22px; }
.roro-note--spaced { margin-top: 14px; }
@media (max-width: 600px) { .roro-card { padding: 22px 20px; } }

/* 10.3 Data table / facts table */
.roro-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.roro-table th, .roro-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--c-line); }
.roro-table thead th { font-weight: 700; color: var(--c-ink-2); font-size: var(--fs-small); }
.roro-table tbody th { font-weight: 600; color: var(--c-ink-2); width: 42%; }
.roro-table tbody td { font-weight: 600; }
.roro-table tr:last-child th, .roro-table tr:last-child td { border-bottom: 0; }

/* 10.4 Checklist */
.roro-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; }
.roro-checklist--cols { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.roro-checklist li { position: relative; padding-left: 30px; }
.roro-checklist li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 20px; height: 20px; border-radius: 50%; background: var(--c-brand-soft);
}
.roro-checklist li::after {
  content: ""; position: absolute; left: 6px; top: .5em;
  width: 8px; height: 5px; transform: rotate(-45deg);
  border-left: 2px solid var(--c-brand); border-bottom: 2px solid var(--c-brand);
}

/* 10.5 Bullet list / pill list */
.roro-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roro-pills li {
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--c-surface); border: 1px solid var(--c-line);
  font-size: .95rem; font-weight: 600;
}

/* 10.6 Numbered steps */
.roro-steps { list-style: none; margin: 0; padding: 0; counter-reset: roro-step; }
.roro-steps--row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 12px; position: relative;
}
.roro-steps--row::before {
  content: ""; position: absolute; top: 19px; height: 2px;
  left: var(--roro-step-edge, 9%); right: var(--roro-step-edge, 9%);
  background: linear-gradient(90deg, var(--c-brand), var(--c-line));
}
.roro-steps li { counter-increment: roro-step; }
.roro-steps--row li { text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.32; position: relative; }
.roro-steps--row li::before {
  content: counter(roro-step);
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--c-brand); color: var(--c-surface);
  font-weight: 750; box-shadow: 0 0 0 5px var(--c-bg);
}
.roro-steps--stack li { position: relative; padding: 0 0 22px 54px; font-weight: 650; min-height: 34px; }
.roro-steps--stack li::before {
  content: counter(roro-step); position: absolute; left: 0; top: -3px;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--c-brand-soft); color: var(--c-brand); font-weight: 750; font-size: .9rem; z-index: 1;
}
.roro-steps--stack li::after {
  content: ""; position: absolute; left: 16px; top: 33px; bottom: 2px; width: 2px; background: var(--c-line);
}
.roro-steps--stack li:last-child { padding-bottom: 0; }
.roro-steps--stack li:last-child::after { display: none; }

@media (max-width: 760px) {
  .roro-steps--row { grid-auto-flow: row; gap: 16px; }
  .roro-steps--row::before { top: 10px; bottom: 10px; left: 19px; right: auto; width: 2px; height: auto; background: var(--c-line); }
  .roro-steps--row li { text-align: left; display: flex; align-items: center; gap: 14px; }
  .roro-steps--row li::before { margin: 0; flex: none; }
}

/* 10.7 Two-column content block / three-column cards */
.roro-cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.roro-cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.roro-cards-3 > li {
  list-style: none; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: 18px 20px; font-weight: 650; line-height: 1.35;
}

/* 10.8 Technical specifications (dimension tiles) */
.roro-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.roro-specs li {
  position: relative; background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: 32px 14px 14px; font-weight: 700;
}
.roro-specs li::before { content: ""; position: absolute; left: 13px; right: 13px; top: 16px; border-top: 1.5px solid var(--c-brand); }
.roro-specs li::after  { content: ""; position: absolute; left: 13px; right: 13px; top: 10px; height: 12px; border-inline: 1.5px solid var(--c-brand); }

/* 10.9 Column list (ports etc.) */
.roro-columns { columns: 4 130px; column-gap: 26px; list-style: none; margin: 0; padding: 0; }
.roro-columns li { padding: 7px 0; break-inside: avoid; font-weight: 600; border-bottom: 1px dashed var(--c-line); }

/* 10.10 FAQ accordion — one design for all page types (ТЗ §11) */
.roro-faq { border-top: 1px solid var(--c-line); }
.roro-faq details { border-bottom: 1px solid var(--c-line); }
.roro-faq summary { position: relative; cursor: pointer; list-style: none; padding: 18px 46px 18px 0; }
.roro-faq summary::-webkit-details-marker { display: none; }
.roro-faq summary h3 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.roro-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  border-radius: 50%; background-color: var(--c-brand-soft);
  background-image: linear-gradient(var(--c-brand), var(--c-brand)), linear-gradient(var(--c-brand), var(--c-brand));
  background-size: 10px 2px, 2px 10px; background-repeat: no-repeat; background-position: center;
  transition: transform .2s ease;
}
.roro-faq details[open] summary::after { transform: rotate(45deg); }
.roro-faq__answer { padding-bottom: 20px; color: var(--c-ink-2); }
.roro-faq__answer p { max-width: 70ch; margin-bottom: .6em; }

/* 10.11 Related links */
.roro-links { list-style: none; margin: 0; padding: 0; }
.roro-links li { border-bottom: 1px solid var(--c-line); }
.roro-links a { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; color: var(--c-ink); text-decoration: none; }
.roro-links a::after {
  content: ""; flex: none; align-self: center; width: 7px; height: 7px; transform: rotate(45deg);
  border-top: 2px solid var(--c-ink-2); border-right: 2px solid var(--c-ink-2); transition: transform .15s ease;
}
.roro-links a:hover { color: var(--c-brand); }
.roro-links a:hover::after { transform: translateX(3px) rotate(45deg); border-color: var(--c-brand); }

/* 10.12 Quote requirements */
.roro-quote-req { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* --------------------------------------------------------------------------
   11. Outer sections after the main grid (ТЗ §3)
   QUOTE / CTA · FAQ · RELATED CONTENT
   -------------------------------------------------------------------------- */
.roro-cta { background: var(--c-brand-ink); color: #fff; padding: 60px 0; scroll-margin-top: 70px; }
:root[data-theme="dark"] .roro-cta { background: var(--c-surface-2); color: var(--c-ink); }
.roro-cta__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 36px 56px; align-items: center; }
.roro-cta__text { opacity: .86; margin-bottom: 24px; max-width: 46ch; }
.roro-cta h2 { color: inherit; }
.roro-cta h3 { font-size: .95rem; font-weight: 650; opacity: .8; margin-bottom: .8em; }
.roro-cta .roro-pills li { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .roro-cta .roro-pills li { background: var(--c-brand-soft); color: var(--c-ink); }

.roro-faq-section { padding: var(--gap-section) 0; }
.roro-related { padding: 0 0 var(--gap-section); }
.roro-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
/* Related blocks live in their own grid, so the main-grid spans must not leak in. */
.roro-related__grid > .roro-block { grid-column: auto; }

/* --------------------------------------------------------------------------
   12. Demo-only controls — DELETE IN PRODUCTION
   -------------------------------------------------------------------------- */
.roro-demo { position: fixed; left: 16px; bottom: 16px; z-index: 60; font-size: .85rem; }
.roro-demo > button {
  border: 0; border-radius: var(--radius-pill); padding: 10px 16px;
  background: var(--c-ink); color: var(--c-bg); font: inherit; font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-md);
}
.roro-demo__panel {
  position: absolute; bottom: 50px; left: 0; width: 260px; max-height: 62vh; overflow: auto;
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-md);
}
.roro-demo__panel[hidden] { display: none; }
.roro-demo__panel p { margin: 0 0 10px; color: var(--c-ink-2); }
.roro-demo__panel label { display: flex; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; }