/* =============================================================
   online-casinos.css — the /online-casinos/ geo-cluster hub.

   Only the .och- vocabulary lives here. Everything else on the page is a
   shipped component pulled from another sheet, deliberately, so this page
   cannot drift from the families it borrows from:
     bnk-hero / bnk-geoline / bnk-picker / bnk-rail / bnk-trap / bnk-chip
                                                    -> banking.css
     .usst-casino Quiet Card toplist                -> us-state.css
     .cv2-faq accordion                             -> v2-components.css
     .av2-byline E-E-A-T credit                     -> article.css
   Design reference: mockups/online-casinos-v2/hub.html (which also holds
   the DYNAMIC DATA CONTRACT governing every number the template prints).

   Section headings and standalone ledes are centered; copy inside cards,
   columns and tables stays left-aligned so lists remain readable.
   ============================================================= */

.och-page h2 {
font-size: var(--bji-text-2xl);
color: var(--bji-navy-900);
margin: 0 0 var(--bji-space-2);
text-align: center;
}
.och-page section { padding-block: var(--bji-space-6); }
.och-page .bnk-main { padding-bottom: 0; }

.och-lede { max-width: 46rem; color: var(--bji-text-muted); margin-inline: auto; text-align: center; }

/* ===== affiliate disclosure under the hero byline (both affiliate pages).
   Expandable <details>, no JS; lives on the navy hero, so inverse-muted. ===== */
/* No measure cap: the hero lede and factcheck line span the full container,
   so a capped disclosure wrapped short and read as broken beside them. */
.och-disclosure { margin-top: var(--bji-space-3); font-size: var(--bji-text-xs); color: var(--bji-text-inverse-muted); line-height: 1.55; }
.och-disclosure summary { list-style: none; cursor: pointer; }
.och-disclosure summary::-webkit-details-marker { display: none; }
.och-disclosure .ico { vertical-align: -0.15em; margin-right: 0.35em; opacity: 0.8; }
.och-disclosure strong { color: #fff; font-weight: var(--bji-weight-semibold); }
.och-disclosure .toggle { margin-left: 0.4em; white-space: nowrap; }
.och-disclosure .toggle .more,
.och-disclosure .toggle .less { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.och-disclosure .less { display: none; }
.och-disclosure[open] .more { display: none; }
.och-disclosure[open] .less { display: inline; }
.och-disclosure-body { margin-top: var(--bji-space-2); }
.och-disclosure-body p { margin: 0; }
.och-disclosure a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* COUNTRY HUB alignment. The cluster root (.och-page, no .och-hub) keeps the
   centered showcase style; a country hub is a data-led page and follows the
   banking-hub idiom instead: LEFT-aligned headings and left, full-width
   section intros flush with the data block they introduce. A centered
   multi-line legality intro sitting over a left-aligned law table was the
   specific mismatch the owner flagged; centering headings + ledes was why the
   whole page "felt different" to /banking/ and the state pages. */
/* The sticky cv2-toc pins at top:0, so a bare anchor jump would tuck the
   target heading under the ~3rem bar. scroll-margin-top lands each TOC target
   just below it. Scoped to the country hub's own section ids. */
.och-hub section[id] { scroll-margin-top: 3.75rem; }
.och-hub h2 { text-align: left; }
.och-hub .och-lede,
.och-hub .och-rate-lede,
.och-hub .och-rg-lede,
.och-hub .och-pay-note { text-align: left; max-width: none; margin-inline: 0; }

/* alternating bands give the long page its rhythm */
.och-bridges-sec, .och-stats, .och-region, .och-pay, .och-rg { background: var(--bji-surface-alt, #f5f7fa); }

/* ===== responsible gambling: quiet outlined panel, not a scare box =====
   The card is an INNER panel, not the .cv2-container, so its border lands on
   the same ~68rem content box as the tables and tile grids rather than the
   72rem container edge (which made it stick out wider than everything else). */
.och-rg { background: var(--bji-surface-alt, #f5f7fa); }
.och-rg-panel {
    background: var(--bji-surface);
    border: 1px solid var(--bji-border);
    border-radius: var(--bji-radius-md);
    padding: var(--bji-space-5);
}
.och-rg p { max-width: 46rem; color: var(--bji-text-muted); font-size: var(--bji-text-sm); }
.och-rg-lede { margin-inline: auto; text-align: center; }
.och-rg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--bji-space-4); margin-top: var(--bji-space-3); }
.och-rg h3 { margin: 0 0 0.4rem; font-size: var(--bji-text-md); color: var(--bji-navy-900); }
.och-rg ul { margin: 0 0 var(--bji-space-2); padding-left: 1.2rem; }
.och-rg li { font-size: var(--bji-text-sm); color: var(--bji-text-muted); margin-bottom: 0.35rem; }
.och-rg a { color: var(--bji-blue-700); }

/* ===== how we rate: full-bleed navy trust panel (live-hub fairness idiom) ===== */
.och-rate {
    background: linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-950));
    color: var(--bji-text-inverse);
}
.och-rate h2 { color: #fff; }
.och-rate-lede { max-width: 46rem; color: var(--bji-text-inverse-muted); margin: 0 auto var(--bji-space-5); text-align: center; }
/* Five steps, so auto-fit is wrong: at any column count below five it
   stranded the fifth on a row of its own (owner spotted the 4+1). This is a
   pipeline, so it gets one row of five on desktop and stacks straight to a
   vertical numbered list below that. No intermediate column count avoids an
   orphan with five items. */
.och-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bji-space-4);
    list-style: none;
    margin: 0 0 var(--bji-space-5);
    padding: 0;
}
@media (min-width: 1024px) {
    .och-steps { grid-template-columns: repeat(5, 1fr); gap: var(--bji-space-3); }
}
.och-steps li { position: relative; padding-top: 0.4rem; border-top: 2px solid rgb(255 255 255 / 0.18); }
.och-steps .n {
    display: inline-grid; place-items: center;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: #fff; color: var(--bji-navy-900);
    font-weight: var(--bji-weight-bold); font-size: var(--bji-text-sm);
    margin-bottom: 0.5rem;
}
.och-steps h3 { margin: 0 0 0.35rem; font-size: var(--bji-text-md); color: #fff; }
.och-steps p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-inverse-muted); }
.och-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--bji-space-3); }
.och-points-col {
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: var(--bji-radius-md);
    padding: var(--bji-space-3) var(--bji-space-4);
}
.och-points-col h3 { margin: 0 0 0.5rem; font-size: var(--bji-text-md); color: #fff; }
/* CSS unicode escapes, not raw glyphs: the stylesheet is served without a
   charset, so raw ✓/✕ mojibaked (âœ") when the browser decoded it as Latin-1.
   \2713 = check, \2715 = cross, \0020 = space; escapes are ASCII and
   encoding-proof. */
.och-points-col--earn h3::before { content: "\2713\0020"; color: var(--bji-green-400, #4ade80); }
.och-points-col--cost h3::before { content: "\2715\0020"; color: var(--bji-red-400, #f87171); }
.och-points-col ul { margin: 0; padding-left: 1.1rem; }
.och-points-col li { font-size: var(--bji-text-sm); color: var(--bji-text-inverse-muted); margin-bottom: 0.4rem; }

/* ===== stats: CSS bars only, every number labeled ===== */
.och-stats { background: var(--bji-surface-alt, #f5f7fa); }
.och-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--bji-space-3); margin-top: var(--bji-space-4); }
.och-chart { background: var(--bji-surface); border: 1px solid var(--bji-border); border-radius: var(--bji-radius-md); padding: var(--bji-space-4); }
.och-chart h3 { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-md); color: var(--bji-navy-900); }
.och-bars { display: grid; gap: 0.55rem; }
.och-bar { display: grid; grid-template-columns: 6.5rem 1fr 2.2rem; align-items: center; gap: 0.6rem; font-size: var(--bji-text-xs); }
.och-bar .lbl { color: var(--bji-text-muted); }
.och-bar .track { background: var(--bji-surface-alt, #eef1f5); border-radius: var(--bji-radius-pill); height: 0.85rem; overflow: hidden; }
.och-bar .fill { display: block; height: 100%; background: var(--bji-navy-800); border-radius: var(--bji-radius-pill); }
.och-bar .fill--low { background: var(--bji-red-500, #dc2626); }
.och-bar .val { text-align: right; font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); }
.och-chart-note { margin: var(--bji-space-3) 0 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.och-clock { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.och-clock li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px dashed var(--bji-border); padding-bottom: 0.45rem; font-size: var(--bji-text-sm); }
.och-clock .m { color: var(--bji-text-muted); }
.och-clock .t { font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); white-space: nowrap; }
.och-clock .t--fast { color: var(--bji-green-700, #15803d); }
.och-clock .t--slow { color: var(--bji-red-600, #dc2626); }

/* ===== legality: compare table, live-vs-RNG idiom ===== */
.och-legal-compare { overflow-x: auto; margin-top: var(--bji-space-4); }
.och-legal-compare table { width: 100%; border-collapse: collapse; background: var(--bji-surface); border: 1px solid var(--bji-border); border-radius: var(--bji-radius-md); overflow: hidden; font-size: var(--bji-text-sm); }
.och-legal-compare th, .och-legal-compare td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--bji-border); vertical-align: top; }
.och-legal-compare thead th { background: var(--bji-navy-900); color: #fff; font-size: var(--bji-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.och-legal-compare tbody th { width: 11rem; color: var(--bji-navy-900); background: var(--bji-surface-alt, #f5f7fa); font-weight: var(--bji-weight-semibold); }
.och-legal-compare td { color: var(--bji-text-muted); }
.och-legal-note { margin: var(--bji-space-3) auto 0; max-width: 46rem; font-size: var(--bji-text-sm); color: var(--bji-text-muted); text-align: center; }

/* ===== region stats: big-number tiles, sources named ===== */
.och-region { background: var(--bji-surface-alt, #f5f7fa); }
.och-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--bji-space-3); margin-top: var(--bji-space-4); }
/* 3+3: our three database tiles on one row, the three market tiles below */
@media (min-width: 900px) { .och-tiles { grid-template-columns: repeat(3, 1fr); } }
.och-tile {
    background: var(--bji-surface);
    border: 1px solid var(--bji-border);
    border-radius: var(--bji-radius-md);
    padding: var(--bji-space-4);
    display: flex; flex-direction: column; gap: 0.35rem;
    text-align: center;
}
.och-tile .num { font-size: var(--bji-text-3xl); font-weight: var(--bji-weight-bold); color: var(--bji-navy-900); line-height: 1.1; }
.och-tile .num .of { font-size: var(--bji-text-md); font-weight: var(--bji-weight-semibold); color: var(--bji-text-faint); }
.och-tile .what { font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.och-tile .src { margin-top: auto; padding-top: 0.5rem; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.och-tile--ext .num { color: var(--bji-navy-800); }

/* ===== payments: table is the data surface; trap + chips reused from banking.css ===== */
.och-pay { background: var(--bji-surface-alt, #f5f7fa); }
.och-pay-h3 { text-align: center; font-size: var(--bji-text-lg); color: var(--bji-navy-900); margin: var(--bji-space-5) 0 var(--bji-space-3); }
.och-pay-table { overflow-x: auto; }
.och-pay-table table { width: 100%; border-collapse: collapse; background: var(--bji-surface); border: 1px solid var(--bji-border); border-radius: var(--bji-radius-md); overflow: hidden; font-size: var(--bji-text-sm); }
.och-pay-table th, .och-pay-table td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid var(--bji-border); }
.och-pay-table thead th { background: var(--bji-navy-900); color: #fff; font-size: var(--bji-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.och-pay-table tbody th { color: var(--bji-navy-900); font-weight: var(--bji-weight-semibold); }
.och-pay-table td { color: var(--bji-text-muted); }
.och-pay-table .fast { color: var(--bji-green-700); font-weight: var(--bji-weight-semibold); }
.och-pay-table .slow { color: var(--bji-red-600, #dc2626); }
.och-pay-note { margin: var(--bji-space-3) auto 0; max-width: 46rem; text-align: center; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.och-pay-note a { color: var(--bji-blue-700); }
.och-pay-local { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bji-space-2); list-style: none; padding: 0; margin: 0; }
.och-pay-local li { display: flex; align-items: center; gap: 0.4rem; background: var(--bji-surface); border: 1px solid var(--bji-border); border-radius: var(--bji-radius-pill); padding: 0.35rem 0.5rem 0.35rem 0.9rem; }
.och-pay-local a { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); text-decoration: none; }
.och-pay-local .n { color: var(--bji-text-faint); font-weight: var(--bji-weight-regular); }
.och-pay-local .bnk-chip { font-size: var(--bji-text-xs); }

/* ===== before-you-play bridges ===== */
.och-bridges { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--bji-space-3); margin-top: var(--bji-space-4); padding: 0; list-style: none; }
@media (min-width: 900px) { .och-bridges { grid-template-columns: repeat(3, 1fr); } }
/* bridge cards: the same flat neutral card as the stat tiles and charts on
   this page (white surface, neutral border), NOT a blue-gradient treatment.
   The gradient + blue border + repetitive uppercase kickers read as
   over-designed against the rest of the page; a "read next" link needs no
   more than a clear title, a one-line reason, and an arrow. */
.och-bridge {
    display: block;
    background: var(--bji-surface);
    border: 1px solid var(--bji-border);
    border-radius: var(--bji-radius-md);
    padding: var(--bji-space-4);
    text-decoration: none;
}
/* The whole card is one <a>, and casino-v2.css has a global a:hover underline,
   so without this every line in the card underlined on hover. The border +
   shadow is the hover affordance; the text stays clean. */
.och-bridge:hover, .och-bridge:focus { border-color: var(--bji-blue-400); box-shadow: var(--bji-shadow-sm); text-decoration: none; }
.och-bridge .t { display: block; font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); margin: 0 0 0.2rem; }
.och-bridge .t::after { content: "\0020\2192"; color: var(--bji-blue-700); } /* space + arrow, escaped (see check/cross note above) */
.och-bridge .s { display: block; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }

/* ===== routing strip: the page's only geo-varying element. Reads as a
   helpful aside, never as a gate, and never claims detection as fact. ===== */
.och-route {
  display: flex; align-items: center; gap: var(--bji-space-3);
  margin-top: var(--bji-space-4);
  padding: 0.7rem 1rem;
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-md);
  font-size: var(--bji-text-sm);
}
.och-route p { margin: 0; flex: 1; color: var(--bji-text-muted); }
.och-route .flag { font-size: 1.1rem; }
.och-route .lead { font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); }
.och-route a { color: var(--bji-blue-700); font-weight: var(--bji-weight-semibold); }
.och-route .n { color: var(--bji-text-faint); font-weight: var(--bji-weight-regular); }
.och-route-x {
  flex: 0 0 auto; width: 1.8rem; height: 1.8rem;
  background: transparent; border: 0; border-radius: 50%;
  font-size: var(--bji-text-lg); line-height: 1; color: var(--bji-text-faint); cursor: pointer;
}
.och-route-x:hover { background: rgb(0 0 0 / 0.06); color: var(--bji-text); }

/* ===== country directory: flag + name + honest count on every entry ===== */
.och-countries { background: var(--bji-surface-alt, #f5f7fa); }
.och-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--bji-space-2); padding: 0; margin: var(--bji-space-4) 0 0; list-style: none;
}
.och-cc {
  display: flex; align-items: center; gap: 0.7rem; height: 100%;
  background: var(--bji-surface); border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md); padding: 0.8rem 1rem; text-decoration: none;
}
.och-cc:hover, .och-cc:focus { border-color: var(--bji-blue-400); box-shadow: var(--bji-shadow-sm); text-decoration: none; } /* same full-card-anchor underline fix as .och-bridge */
/* the visitor's own country, pinned first */
.och-cc.is-you { border-color: var(--bji-blue-400); background: var(--bji-blue-050); }
.och-cc .flag { font-size: 1.4rem; }
.och-cc .n { font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); display: block; }
.och-cc .c { font-size: var(--bji-text-xs); color: var(--bji-text-faint); }

/* =============================================================
   Country hubs (/au/, /ca/ ...): page-country-hub.php. Same vocabulary as
   the cluster root plus the two components only a country page needs.
   ============================================================= */

/* The legality section reuses the state pages' usst-law table, usst-status
   pills, usst-penalty panel and usst-lawsources line verbatim (us-state.css is
   in this page's bundle). The bespoke .och-legal-facts icon cards that used to
   live here were deleted: an invented component that read as generic filler,
   against the rule to restyle existing layouts rather than cut new ones.
   Only the width alignment is set here, so the law table matches the other
   full-width data surfaces on the page instead of sitting at its own measure. */
.och-legal .usst-law,
.och-legal .usst-penalty { margin-top: var(--bji-space-4); }
.och-legal .usst-lawfoot,
.och-legal .usst-lawsources { text-align: center; }

/* ===== interactive payout table (#4): sortable headers + crypto filter ===== */
/* filter controls; hidden until JS reveals them (progressive enhancement) */
.och-paytools { display: flex; gap: var(--bji-space-2); margin-bottom: var(--bji-space-3); }
.och-payfilter { display: inline-flex; gap: 0.3rem; }
.och-payfilter button {
  font: inherit; font-size: var(--bji-text-sm); cursor: pointer;
  padding: 0.3rem 0.8rem; border-radius: var(--bji-radius-pill);
  border: 1px solid var(--bji-border); background: var(--bji-surface); color: var(--bji-text-muted);
}
.och-payfilter button[aria-pressed="true"] { background: var(--bji-navy-900); border-color: var(--bji-navy-900); color: #fff; }

/* sortable column headers: the whole header is a button */
.och-pay-table th.sortable { padding: 0; }
.och-pay-table th.sortable button {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: 0.6rem 0.9rem;
  display: flex; align-items: center; gap: 0.35em;
}
.och-pay-table th.sortable button::after { content: "\2195"; opacity: 0.5; font-size: 0.9em; } /* up-down arrow */
.och-pay-table th.sortable[aria-sort="ascending"] button::after { content: "\2191"; opacity: 1; }
.och-pay-table th.sortable[aria-sort="descending"] button::after { content: "\2193"; opacity: 1; }

/* crypto tag on the method name */
.och-tag { display: inline-block; margin-left: 0.4em; padding: 0.02em 0.5em; border-radius: var(--bji-radius-pill); font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold); text-transform: none; letter-spacing: 0; }
.och-tag--crypto { background: var(--bji-blue-050); color: var(--bji-blue-700); }
.och-pay-empty { margin-top: var(--bji-space-3); font-size: var(--bji-text-sm); color: var(--bji-text-muted); }

/* ---- Related articles (legacy tag-driven grid, v2 idiom) ---- */
.och-relart { padding: var(--bji-space-7) 0; }
.och-relart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--bji-space-4);
  margin-top: var(--bji-space-4);
}
.och-relart-card {
  display: flex;
  flex-direction: column;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--bji-duration) var(--bji-ease);
}
.och-relart-card:hover { box-shadow: var(--bji-shadow-md); }
.och-relart-card .thumb {
  display: block;
  aspect-ratio: 300 / 158;
  background-size: cover;
  background-position: center;
  background-color: var(--bji-navy-900);
}
.och-relart-card .t {
  padding: var(--bji-space-3) var(--bji-space-4);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-900);
}

/* ---- Comments (wide-shell v2 pages) ---- */
.och-comments { padding: var(--bji-space-7) 0; background: var(--bji-surface); border-top: 1px solid var(--bji-border); }
.och-comments h2 { margin: 0 0 var(--bji-space-4); }
/* wpDiscuz's inline options CSS caps #wpdcom at 750px and centers it, which
   left the form floating in the section (the fix casino pages get from the
   "Casino Review" form's custom CSS never loads on pages). Class+id beats
   its bare id. Also zero its stray top chrome so the heading owns the gap. */
.och-comments #wpdcom { max-width: none; margin: 0; padding: 0; }
/* The legacy stylesheet's bare `#comments { margin: 50px auto }` outranks a
   class chain (ID specificity), hence the ID here too. */
.och-comments #comments.comments-area { margin-top: 0; max-width: none; }
.och-comments #wpdcom .wpd-form-head { margin-top: 0; }
.och-comments .wpd-form-wrap { margin-top: 0; }

/* ---- About-the-author box (copied from casino-v2.css .cv2-author, which is
   not in this bundle; keep the two in step) ---- */
.och-page .cv2-kicker {
  display: block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bji-text-faint);
  margin-bottom: var(--bji-space-1);
}
.och-page .cv2-author {
  display: flex;
  gap: var(--bji-space-5);
  align-items: flex-start;
  max-width: calc(var(--bji-prose-width) + 2 * var(--bji-gutter));
  margin: var(--bji-space-7) auto;
  padding: var(--bji-space-5);
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
}
.och-page .cv2-author img { width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto; }
.och-page .cv2-author h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-lg); }
.och-page .cv2-author p { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.och-page .cv2-author-more { font-style: italic; }
.och-page .cv2-author-more, .och-page .cv2-author p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .och-page .cv2-author { flex-direction: column; align-items: center; text-align: center; }
}