/* ==========================================================================
   limenbasilca.com — California Online Casinos
   Site-wide light slate / lime-green system inspired by the supplied mockup.
   ========================================================================== */

:root{
  --surface:#051424;
  --surface-container:#122131;
  --surface-container-low:#0d1c2d;
  --surface-container-high:#1c2b3c;
  --primary:#22c55e;
  --primary-bright:#4be277;
  --primary-soft:#dcfce7;
  --primary-dark:#004b1e;
  --secondary:#eec200;
  --secondary-soft:#fef3c7;
  --background:#f8fafc;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --error:#b91c1c;
  --ok:#15803d;
  --wrap:1280px;
  --radius:8px;
  --radius-sm:4px;
  --radius-xs:2px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 8px 22px rgba(15,23,42,.08);
  --shadow-lg:0 16px 38px rgba(15,23,42,.14);
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(#cbd5e1 1px, transparent 1px) 0 0 / 24px 24px,
    var(--background);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:rgba(248,250,252,.52);
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px}
img{max-width:100%; height:auto}
a{color:var(--primary-dark); text-decoration-color:rgba(34,197,94,.35); text-underline-offset:3px}
a:hover{color:#006e2f}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px; padding-left:22px}
li{margin:0 0 6px}
h1,h2,h3,h4{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  letter-spacing:0;
  line-height:1.18;
}
h1{font-size:48px; line-height:56px; font-weight:800; max-width:18ch}
h2{font-size:32px; line-height:40px; font-weight:750}
h3{font-size:22px; line-height:30px; font-weight:750}
h4{font-size:16px; line-height:22px; font-weight:750}

.skip-nav{
  position:absolute;
  top:-50px;
  left:0;
  z-index:9999;
  padding:10px 18px;
  background:var(--primary-dark);
  color:#fff;
  border-radius:0 0 var(--radius-sm) 0;
  font-weight:700;
  text-decoration:none;
}
.skip-nav:focus{top:0}
:focus-visible{outline:2px solid var(--primary); outline-offset:3px}

/* Header / nav */
header.site{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.nav{display:flex; align-items:center; gap:24px; min-height:80px}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  text-decoration:none;
  color:var(--primary-dark);
}
.brand-logo{height:48px; width:auto; display:block}
.brand .mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:var(--primary-dark);
  color:#fff;
  font-weight:900;
}
.brand-tx{
  display:flex;
  flex-direction:column;
  font-size:28px;
  line-height:1;
  font-weight:900;
  font-style:italic;
  letter-spacing:0;
  color:var(--primary-dark);
}
.brand-tx small{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:24px;
  margin-left:auto;
}
.nav-links > a,.nav-item > a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  color:#475569;
  font-size:14px;
  line-height:20px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .14s, transform .14s, border-color .14s;
}
.nav-links > a:hover,.nav-item > a:hover{
  color:var(--primary-dark);
  transform:scale(.97);
}
.nav-links > a.cur{
  color:var(--primary-dark);
  border-bottom-color:var(--primary-dark);
}
.nav-item{position:relative}
.caret{font-size:12px; margin-left:3px}
.nav-item .sub{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:260px;
  max-height:min(70vh,620px);
  overflow:auto;
  padding:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.nav-item:hover .sub{display:block}
.nav-item .sub a{
  display:block;
  padding:9px 11px;
  color:#334155;
  border-radius:var(--radius-sm);
  text-decoration:none;
  font-size:14px;
  line-height:20px;
}
.nav-item .sub a:hover{background:#f1f5f9; color:var(--primary-dark)}
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 20px;
  border-radius:var(--radius-sm);
  background:var(--primary-dark);
  color:#fff !important;
  box-shadow:var(--shadow-sm);
  font-size:14px;
  line-height:20px;
  font-weight:800;
  text-transform:none !important;
  letter-spacing:0 !important;
  border:0 !important;
}
.nav-cta:hover{filter:brightness(1.08); transform:none}
.nav-toggle,.nav-close{display:none}
.nav-overlay{display:none}

/* Hero */
.hero{position:relative; overflow:hidden; background:transparent; color:var(--ink)}
.hero .wrap{display:block; max-width:var(--wrap); padding-top:52px; padding-bottom:8px}
.hero-inner{
  max-width:840px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:22px;
}
.hero-inner h1{margin:0; color:var(--ink)}
.hero-sub{
  margin:0;
  max-width:720px;
  color:#475569;
  font-size:18px;
  line-height:28px;
}
.hero-author,.page-author{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.page-author{margin:0 0 18px; width:max-content; max-width:100%}
.hero-author-img,.page-author-img{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:999px;
  border:2px solid var(--primary-dark);
  object-fit:cover;
  flex:0 0 48px;
}
.page-author-img{width:40px; height:40px; flex-basis:40px}
.avatar-initials{
  background:var(--primary-dark);
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:900;
}
.hero-author-tx,.page-author-tx{display:flex; flex-direction:column; gap:2px}
.hero-author-name,.page-author-tx span{
  color:var(--ink);
  font-size:14px;
  line-height:20px;
  font-weight:800;
}
.hero-author-name a,.page-author-tx a{color:var(--ink); text-decoration:none}
.hero-author-meta,.page-author-meta{
  color:var(--muted) !important;
  font-size:13px !important;
  line-height:18px !important;
  font-weight:500 !important;
}
.hero-author-meta a{color:var(--primary-dark)}
.hero-top-pick{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  max-width:760px;
  padding:22px 24px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--primary-dark);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:left;
}
.hero-top-pick::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--primary);
  opacity:.05;
  pointer-events:none;
}
.htprow{position:relative; z-index:1; display:flex; align-items:center; gap:24px; min-width:0}
.htplogo{width:132px; height:70px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; flex:0 0 auto}
.htptx{display:flex; flex-direction:column; min-width:0}
.htplabel{
  margin-bottom:4px;
  color:#d97706;
  font-size:12px;
  line-height:16px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.htpbonus{
  color:var(--ink);
  font-size:24px;
  line-height:32px;
  font-weight:800;
}

/* Main layout */
main{padding:40px 0 16px}
main > .wrap{display:flex; flex-direction:column; gap:32px}
.card{
  width:100%;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card > h1:first-child{margin-bottom:18px; max-width:none}
.card > h2:first-child,main h2:first-child{margin-top:0}
main h2,.card h2{
  margin:18px 0 18px;
  padding:0 0 12px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
main h3,.card h3{margin:22px 0 10px}
.byline,.lastmod,.note{
  color:var(--muted);
  font-size:14px;
  line-height:20px;
}
.note{font-style:normal}
.toplist-lead{
  max-width:860px;
  margin:-12px 0 0;
  color:#475569;
  font-size:16px;
  line-height:24px;
}
.disclosure,.callout,.rg{
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--primary);
  border-radius:var(--radius);
  color:#334155;
  box-shadow:var(--shadow-sm);
}
.callout.legal{border-left-color:var(--secondary)}
.rg{border-left-color:var(--error); background:#fff}

/* CTA buttons */
.cta{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 20px;
  border:1px solid var(--primary-dark);
  border-radius:var(--radius-sm);
  background:var(--primary-dark);
  color:#fff !important;
  box-shadow:var(--shadow-sm);
  font-size:14px;
  line-height:20px;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  transition:filter .14s, box-shadow .14s, transform .14s;
}
.cta:hover{filter:brightness(1.08); box-shadow:var(--shadow); transform:translateY(-1px)}
.cta.sm{min-height:38px; padding:9px 16px; font-size:13px}

/* Ranking table */
.toplist{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.toplist thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:2px solid var(--line)}
.toplist thead th.col-cta,.toplist thead th.col-rating{text-align:right}
.toplist tr.highlight-row{background:#f6fbf4}
.toplist tbody{display:table-row-group}
.toplist tr.row{
  position:relative;
  border-bottom:1px solid var(--line);
  background:#fff;
  transition:background .14s;
}
.toplist tr.row:last-child{border-bottom:0}
.toplist tr.row:hover{background:#f8fafc}
.toplist tr.row:nth-child(1){background:#fff}
.toplist tr.row td:first-child{position:relative}
.toplist tr.row:nth-child(1) td:first-child::before{
  content:"TOP PICK";
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  z-index:2;
  padding:2px 6px;
  background:#fbbf24;
  color:#78350f;
  border-radius:999px;
  font-size:10px;
  line-height:14px;
  font-weight:900;
  letter-spacing:.06em;
}
.toplist td{
  padding:20px 16px;
  vertical-align:middle;
  border:0;
}
.toplist td:first-child{width:72px}
.toplist td:last-child{text-align:right}
.rank{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid var(--line);
  color:#475569;
  box-shadow:var(--shadow-sm);
  font-size:14px;
  line-height:20px;
  font-weight:900;
}
.toplist tr.row:nth-child(1) .rank{background:#fbbf24; color:#78350f; border-color:#f59e0b}
.logo-chip,.initials{width:148px; height:76px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:var(--navy-2); flex:0 0 auto}
.initials{color:var(--primary-dark); font-weight:900; font-size:18px}
.brandcell{min-width:180px}
.brandcell .bname{
  display:block;
  color:var(--ink);
  font-size:22px;
  line-height:30px;
  font-weight:800;
  text-decoration:none;
}
.brandcell .btag{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
  line-height:18px;
}
.bonus{font-weight:800; font-size:17px; line-height:22px; color:#92400E; background:#FEF3C7; display:inline-block; padding:4px 10px; border-radius:8px}
.bonus small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
  line-height:18px;
  font-weight:500;
}
.ratecell{
  color:var(--ink);
  font-size:18px;
  line-height:24px;
  font-weight:900;
  text-align:center;
}
.ratecell::before{
  content:"★★★★★";
  display:block;
  color:#f59e0b;
  font-size:17px;
  line-height:20px;
  letter-spacing:1px;
}
.ratecell small{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:16px;
  font-weight:600;
}

/* Data tables */
table.data{
  width:100%;
  border-collapse:collapse;
  margin:10px 0 24px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  font-size:15px;
  line-height:22px;
}
table.data th{
  padding:12px;
  background:#f8fafc;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  line-height:16px;
  font-weight:900;
  letter-spacing:.06em;
  text-align:left;
  text-transform:uppercase;
}
table.data td{
  padding:13px 12px;
  border-bottom:1px solid var(--line);
}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:#f8fafc}

/* Review blocks */
.opblock{
  padding:20px;
  margin:0 0 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.opblock .head{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.opblock .head h3{margin:0}
.opblock .head h1{margin:0; max-width:none; font-size:32px; line-height:40px}
.review-hero-cta{margin:14px 0 18px}
.review-hero-cta .cta{width:100%; padding:13px 20px}
.proscons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:18px 0;
}
.pros,.cons{
  padding:16px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.pros h4{color:var(--ok)}
.cons h4{color:var(--error)}
.pros li{color:#166534}
.cons li{color:#7f1d1d}

/* FAQ */
.faq{display:flex; flex-direction:column; gap:10px}
.faq details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.faq summary{
  position:relative;
  padding:15px 46px 15px 16px;
  color:var(--ink);
  cursor:pointer;
  font-size:16px;
  line-height:24px;
  font-weight:800;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--primary-dark);
  font-size:22px;
  font-weight:800;
}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details[open] summary::after{content:"-"}
.faq p{padding:14px 16px 16px; margin:0; color:#334155}

/* Author / footer / breadcrumb */
.author-portrait{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  border-radius:999px;
  border:2px solid var(--primary-dark);
  object-fit:cover;
}
.crumb{
  padding:14px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:18px;
}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--primary-dark)}
footer.site{
  margin-top:48px;
  padding:48px 0;
  color:#475569;
  background:#f1f5f9;
  border-top:1px solid var(--line);
}
footer.site .cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
footer.site h4{
  margin:0 0 12px;
  color:var(--ink);
  font-size:16px;
  line-height:24px;
  font-weight:850;
}
footer.site a{
  display:block;
  padding:4px 0;
  color:#475569;
  font-size:13px;
  line-height:18px;
  font-weight:600;
  text-decoration:none;
}
footer.site a:hover{color:var(--primary-dark)}
footer.site .legal{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:#64748b;
  font-size:13px;
  line-height:20px;
}
footer.site .fbrand{
  color:var(--ink);
  font-size:24px;
  line-height:32px;
  font-weight:900;
}
.rg-line{color:#475569; font-weight:700}

/* Mobile */
@media (max-width:980px){
  .wrap{padding:0 16px}
  .nav{min-height:68px}
  .brand-logo{height:40px}
  .brand-tx{font-size:22px}
  .nav-toggle{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    margin-left:auto;
    border:0;
    background:transparent;
    cursor:pointer;
  }
  .nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); border-radius:2px}
  .nav-links{
    position:fixed;
    inset:0 0 0 auto;
    z-index:1001;
    width:min(88vw,380px);
    padding:82px 22px 28px;
    background:#fff;
    border-left:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    transform:translateX(100%);
    transition:transform .24s ease;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow:auto;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-overlay{display:block; position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.48)}
  .nav-overlay[hidden]{display:none}
  .nav-close{
    display:block;
    position:absolute;
    top:16px;
    right:18px;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:32px;
    line-height:1;
    cursor:pointer;
  }
  .nav-links > a,.nav-item > a{
    width:100%;
    min-height:50px;
    border-bottom:1px solid var(--line);
    color:var(--ink);
  }
  .nav-links > a.cur{border-bottom-color:var(--line); color:var(--primary-dark)}
  .nav-item .sub{
    position:static;
    display:none;
    min-width:0;
    max-height:none;
    margin:0 0 8px;
    box-shadow:none;
    border:1px solid var(--line);
  }
  .nav-item:hover .sub{display:none}
  .nav-item.subopen .sub{display:block}
  .nav-cta{width:100%; margin-top:16px}
}
@media (max-width:760px){
  body{font-size:16px}
  h1{font-size:36px; line-height:42px}
  h2{font-size:28px; line-height:34px}
  .hero .wrap{padding-top:28px}
  .hero-inner{gap:16px}
  .hero-sub{font-size:16px; line-height:24px}

  main{padding:24px 0 10px}
  main > .wrap{gap:24px}
  .card{padding:20px 16px}
  .hero-author,.page-author{align-items:flex-start}
  .hero-top-pick{padding:16px; flex-direction:column; align-items:stretch}
  .htprow{gap:12px}
  .htpbonus{font-size:20px; line-height:28px}
  .toplist{display:block; border:0; background:transparent; box-shadow:none}
  .toplist thead{display:none}
  .toplist tbody{display:block}
  .toplist tr.row{
    display:block;
    margin:0 0 14px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
  }
  .toplist tr.row:nth-child(1){border-color:var(--primary-dark)}
  .toplist tr.row:nth-child(1) td:first-child::before{top:4px; left:50%; transform:translateX(-50%)}
  .toplist td{display:block; padding:6px 0; text-align:center !important}
  .toplist td:first-child{width:auto; padding-top:18px}
  .rank{margin:0 auto 6px}
  .toplist .logo-chip,.toplist .initials{width:128px; height:68px; margin:0 auto}
  .brandcell .bname{font-size:24px; line-height:32px}
  .bonus{font-size:20px; line-height:26px; background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%); color:#78350F; padding:8px 14px; border-radius:8px; display:inline-block}
  .toplist .cta{width:100%; margin-top:6px}
  .proscons{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  table.data{display:block; overflow:hidden}
  table.data thead{display:none}
  table.data tbody{display:block}
  table.data tr{display:block; padding:10px 0; border-bottom:1px solid var(--line)}
  table.data tr:last-child{border-bottom:0}
  table.data td{
    display:block;
    padding:6px 12px;
    border:0;
  }
  table.data td[data-label]::before{
    content:attr(data-label);
    display:block;
    margin-bottom:2px;
    color:var(--muted);
    font-size:11px;
    line-height:16px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
}
@media (max-width:520px){
  footer.site .cols{grid-template-columns:1fr}
  .brand-logo{max-width:160px; object-fit:contain}
  .opblock .head{align-items:flex-start}
  .opblock .head .cta{width:100%}
}


/* brand cells in data tables: logo + name on one line */
td.tbrand{display:flex; align-items:center; gap:10px; min-width:170px}
td.tbrand .logo-chip, td.tbrand .initials{width:84px; height:44px; padding:4px; border-radius:8px; font-size:14px}
/* per-card mini spec table on hub review cards */
table.minispec{margin:10px 0}
table.minispec td:first-child{width:150px; font-weight:700; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em}
@media (max-width:768px){
  td.tbrand{min-width:0}
  table.data td.tbrand{display:flex !important; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:10px}
  table.data td.tbrand[data-label]::before{width:100%; flex:0 0 100%}
  table.minispec tr{display:block; padding:6px 0; border-bottom:1px dashed var(--line)}
  table.minispec tr:last-child{border-bottom:0}
  table.minispec td{display:block; padding:2px 8px}
  table.minispec td:first-child{width:auto; font-size:11px; padding-bottom:0}
  table.minispec td[data-label]::before{display:none}
}

/* operator screenshot figures */
figure.shot{margin:18px 0}
figure.shot img{max-width:100%; width:auto; height:auto; display:block; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
figure.shot figcaption{margin-top:6px; color:var(--muted); font-size:13px; line-height:18px}

/* opblock head CTA slot */
.opblock .head .opcta{margin-left:auto}
@media (max-width:768px){
  .opblock .head{flex-wrap:wrap; row-gap:10px}
  .opblock .head .opcta{margin-left:0; flex:0 0 100%}
  .opblock .head .opcta .cta{display:block; width:100%; text-align:center}
}