/* divent.app — shared rules on top of each page's design styles (built by scripts/build-landing.py).
   The design boards are 1440 px wide with inline styles; these rules make them fluid. */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: #F5F7FA; overflow-x: hidden; }
.pg { width: 100% !important; height: auto !important; min-height: 100vh; }
.wrap { width: auto !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; }
img { max-width: 100%; }
a { cursor: pointer; }
:focus-visible { outline: 3px solid #10C86A; outline-offset: 3px; border-radius: 6px; }

/* Header: menu button and panel (small screens) */
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 23px; border: 0; background: rgba(255,255,255,0.12); padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s, opacity .2s; }
.nav { position: relative; }
.menu-btn { color: #042C53; background: #EEF1F5; }
.dark .menu-btn { color: #FFFFFF; background: rgba(255,255,255,0.12); }
body.menu-open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Home: desktop and mobile boards */
.m-home { display: none; }
.m-home > div:first-child { width: 100% !important; height: auto !important; }
.m-home > div:first-child > * { flex-shrink: 0; }
.m-nav { height: auto !important; }
.m-home > div:first-child > .dark { overflow: visible !important; position: relative; z-index: 1; }

/* Legal text inside the design card */
.legal { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.6; color: #24384C; }
.legal h2 { margin-top: 22px; scroll-margin-top: 24px; color: #0B1B2B; }
.legal .lh3 { margin: 8px 0 0; font-size: 17px; font-weight: 700; color: #0B1B2B; }
.legal p, .legal ul { margin: 0; }
.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal a { color: #0B4F96; text-decoration: underline; text-underline-offset: 2px; }
.legal code { font-size: 14px; background: #EEF1F5; padding: 1px 6px; border-radius: 6px; }
.legal-meta { font-size: 14px; color: #42546A; background: #F5F7FA; border-radius: 14px; padding: 14px 16px; }

/* Contact form (real inputs in the design's field style) */
.cf { display: flex; flex-direction: column; gap: 16px; }
.cf label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: #24384C; }
.cf input, .cf select, .cf textarea { font: inherit; font-size: 16px; font-weight: 400; color: #0B1B2B; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px #DFE5EC; background: #F5F7FA; padding: 0 14px; height: 50px; }
.cf textarea { height: 140px; padding: 14px; resize: vertical; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; box-shadow: inset 0 0 0 2px #10C86A; background: #FFFFFF; }
.cf button { border: 0; cursor: pointer; font-family: inherit; }

/* Live cases */
.cases-empty { padding: 28px 0; color: #42546A; font-size: 15px; }
.case-row td:first-child a:hover b { text-decoration: underline; }
[data-live="loading"] { opacity: .55; transition: opacity .2s; }
.pill.filter { cursor: pointer; border: 0; font-family: inherit; }
.case-search { border: 0; background: transparent; font: inherit; font-size: 15px; color: #0B1B2B; outline: none; width: 100%; }

/* ---------- Tablet and phone ---------- */  @media (max-width: 1100px) {
  .wrap { padding-left: 24px !important; padding-right: 24px !important; }
  .pg [style*="width:880px"], .pg [style*="width:760px"], .pg [style*="width:700px"] { width: 100% !important; }
}
  @media (max-width: 1023px) {
  .nav .links { display: none !important; }
  body.menu-open .nav .links { display: flex !important; }
  .nav > .btn { display: none; }
  .menu-btn { display: inline-flex; }
  body.menu-open .nav .links {
    display: flex; flex-direction: column; gap: 0; position: absolute; z-index: 50; top: 70px; left: 16px; right: 16px;
    background: #FFFFFF; border-radius: 22px; padding: 8px; box-shadow: 0 20px 50px rgba(4,44,83,0.25);
  }
  body.menu-open .nav .links a { color: #042C53 !important; padding: 14px 16px; border-radius: 14px; font-size: 17px; }
  body.menu-open .nav .links a:hover { background: #F5F7FA; }
  /* Grids collapse to one column; flex rows wrap */
  .pg [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  .pg [style*="grid-template-columns:repeat(3"], .pg [style*="grid-template-columns:repeat(4"], .pg [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .pg [style*="display:flex"]:not([style*="flex-direction:column"]):not(.nav):not(.store):not(.btn):not(.pill):not(.tag) { flex-wrap: wrap; }
  .pg [style*="position:sticky"] { position: static !important; }
  .pg [style*="max-width:"] { max-width: 100% !important; }
  .pg [style*="width:300px"], .pg [style*="width:320px"], .pg [style*="width:340px"], .pg [style*="width:360px"], .pg [style*="width:380px"], .pg [style*="width:400px"], .pg [style*="width:420px"], .pg [style*="width:440px"], .pg [style*="width:460px"], .pg [style*="width:480px"], .pg [style*="width:520px"], .pg [style*="width:560px"], .pg [style*="width:600px"], .pg [style*="width:640px"] { max-width: 100% !important; }
  /* Type */
  .pg .h1 { font-size: 44px !important; line-height: 1.05 !important; }
  .pg .h2 { font-size: 32px !important; }
  .pg .lead { font-size: 18px !important; }
  .pg [style*="font-size:48px"], .pg [style*="font-size:44px"] { font-size: 34px !important; }
  /* Section spacing */
  .pg section[style*="padding:112px"], .pg section[style*="padding:120px"], .pg section[style*="padding:96px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  .pg div[style*="padding:72px"] { padding: 40px 28px !important; }
  .pg div[style*="padding:48px"] { padding: 28px !important; }
  /* Phone mock-ups: one phone, centred, in the flow */
  .pg div[style*="position:relative"][style*="height:"] { height: auto !important; display: flex; justify-content: center; padding: 8px 0 24px; }
  .pg div[style*="position:relative"][style*="height:"] > div[style*="position:absolute"] { position: static !important; }
  .pg div[style*="position:relative"][style*="height:"] > div[style*="position:absolute"] ~ div[style*="position:absolute"] { display: none; }
  .pg .phone { width: min(290px, 78vw) !important; transform: none !important; }
  .pg [style*="padding-bottom:120px"] { padding-bottom: 24px !important; }
  /* Tables scroll sideways */
  .pg .card:has(> table.t) { overflow-x: auto; }
  .pg table.t { min-width: 640px; }
}
  @media (max-width: 720px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .d-home { display: none; }
  .m-home { display: block; }
  .pg .h1 { font-size: 38px !important; }
  .pg [style*="align-items:flex-end"] { align-items: flex-start !important; }
  .pg table.t, .pg table.t tbody, .pg table.t tr, .pg table.t td { display: block; min-width: 0 !important; width: auto !important; }
  .pg table.t tr:first-child { display: none; }
  .pg table.t tr { padding: 16px 0; border-top: 1px solid #EEF1F5; }
  .pg table.t tr:nth-child(2) { border-top: 0; }
  .pg table.t td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; }
  .pg table.t td:last-child { padding-top: 10px !important; }
  .pg .card:has(> table.t) { overflow: visible; }
  .pg .h2 { font-size: 28px !important; }
  .pg [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .pg .store { height: 50px; }
  .pg [style*="padding:34px"], .pg [style*="padding:32px"], .pg [style*="padding:28px"] { padding: 22px !important; }
  .pg [style*="border-radius:36px"] { border-radius: 26px !important; }
  .pg footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
  .pg footer [style*="grid-template-columns"] > div:first-child { grid-column: 1 / -1; }
}
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
.pg div:has(> .case-search) { flex-wrap: nowrap !important; width: min(320px, 100%) !important; }
.pg [style*="grid-template-columns"] > * { min-width: 0; }