/* Ultra-compact premium SEO intro cards for MyFlange public pages
   Replace /seo-intro.css with this file if the first visual version feels too tall.
   This file only changes the visible intro-card style. It does not change data, links, lists or ASP logic. */

.seo-hero {
  position: relative;
  margin: 5px 8px 8px 8px;
  padding: 10px 16px 10px 18px;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 93% 10%, rgba(47,110,178,.07), transparent 23%),
    linear-gradient(135deg, #ffffff 0%, #fbfdff 62%, #f6f9fd 100%);
  box-shadow: 0 2px 9px rgba(15, 39, 75, .055);
  overflow: hidden;
  text-align: left;
  color: #25364a;
  word-break: normal;
  word-wrap: normal;
}
.seo-hero * { box-sizing: border-box; }
.seo-hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #1d5ea8 0%, #0b376e 55%, #b20d18 100%);
  opacity: .95;
}
.seo-hero__body {
  position: relative;
  z-index: 2;
  max-width: 820px;
}
.seo-hero--wide .seo-hero__body { max-width: 930px; }
.seo-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px 0;
  color: #0d4f9c;
  font: 700 11px/1.15 Arial, Helvetica, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.seo-hero__eyebrow:after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 4px;
  background: linear-gradient(90deg, #0d4f9c, rgba(13,79,156,0));
  border-radius: 99px;
}
.seo-hero__icon {
  width: 20px;
  height: 20px;
  border: 1px solid #9dc3ec;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1b65b1;
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 3px rgba(26,104,181,.05);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.right .seo-hero h1,
.seo-hero h1 {
  margin: 0 0 5px 0;
  padding: 0;
  max-width: 760px;
  height: auto;
  line-height: 1.12;
  text-align: left;
  color: #9f0f18;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .1px;
  word-spacing: 0;
  white-space: normal;
}
.seo-hero p {
  margin: 0 0 3px 0;
  color: #25364a;
  font: 12px/1.38 Arial, Helvetica, sans-serif;
  text-align: left;
  word-break: normal;
}
.seo-hero__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 0 0;
  vertical-align: middle;
}
.seo-hero__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 2px 7px;
  border: 1px solid #dbe4ee;
  border-radius: 4px;
  background: rgba(255,255,255,.9);
  color: #2d3c4f;
  font-size: 11.5px;
  line-height: 1.1;
  box-shadow: 0 1px 0 rgba(15,39,75,.035);
  white-space: nowrap;
}
.seo-hero__chips span:before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border: 2px solid #2d72bd;
  border-radius: 50%;
  opacity: .88;
}
.seo-hero__actions {
  display: inline-block;
  margin: 5px 0 0 8px;
  vertical-align: middle;
}
.seo-hero__btn,
.seo-hero__btn:link,
.seo-hero__btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 118px;
  padding: 6px 13px;
  border-radius: 4px;
  background: linear-gradient(180deg, #0b4b94 0%, #073069 100%);
  color: #ffffff;
  font: 700 12px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(7,48,105,.16);
}
.seo-hero__btn:hover { color: #ffffff; background: linear-gradient(180deg, #115da9 0%, #083a7d 100%); }
.seo-hero__btn--red,
.seo-hero__btn--red:link,
.seo-hero__btn--red:visited {
  background: linear-gradient(180deg, #c91526 0%, #9f0f18 100%);
  box-shadow: 0 3px 8px rgba(159,15,24,.16);
}
.seo-hero__note {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  color: #607089;
  font-size: 11.5px;
  line-height: 1.2;
}
.seo-hero__note:before {
  content: "OK";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 50%;
  background: #edf4fc;
  color: #1e63ad;
  font-size: 9px;
  font-weight: bold;
}
.seo-hero__art {
  position: absolute;
  z-index: 1;
  right: 16px;
  top: 12px;
  width: 150px;
  height: 92px;
  pointer-events: none;
  opacity: .14;
}
.seo-hero--wide .seo-hero__art { right: 28px; width: 205px; height: 96px; opacity: .10; }

/* decorative motifs */
.seo-hero__art--ship:before {
  content: "";
  position: absolute;
  right: 15px;
  top: 53px;
  width: 125px;
  height: 34px;
  border: 3px solid #2a6daf;
  border-top: none;
  transform: skewX(-18deg);
  border-radius: 0 0 9px 16px;
}
.seo-hero__art--ship:after {
  content: "";
  position: absolute;
  right: 53px;
  top: 20px;
  width: 66px;
  height: 40px;
  background:
    linear-gradient(#2a6daf,#2a6daf) 0 0/100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 30%, #2a6daf 30% 34%, transparent 34% 64%, #2a6daf 64% 68%, transparent 68% 100%);
  border: 3px solid #2a6daf;
  border-bottom: none;
}
.seo-hero__art--flange:before,
.seo-hero__art--flange:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 14px solid #657a90;
  background: radial-gradient(circle, transparent 0 27%, #657a90 28% 32%, transparent 33% 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.03), 14px 0 0 -10px #657a90, -14px 0 0 -10px #657a90, 0 14px 0 -10px #657a90, 0 -14px 0 -10px #657a90;
}
.seo-hero__art--flange:before { right: 16px; top: 6px; width: 70px; height: 70px; }
.seo-hero__art--flange:after { right: 80px; top: 38px; width: 56px; height: 56px; border-width: 11px; }
.seo-hero__art--drawing:before {
  content: "";
  position: absolute;
  right: 36px;
  top: 18px;
  width: 88px;
  height: 88px;
  border: 3px solid #2a6daf;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, #2a6daf 48%, #2a6daf 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, #2a6daf 48%, #2a6daf 52%, transparent 53%);
}
.seo-hero__art--drawing:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 8px;
  width: 148px;
  height: 106px;
  background:
    linear-gradient(90deg, rgba(42,109,175,.85) 1px, transparent 1px) 0 0/30px 30px,
    linear-gradient(rgba(42,109,175,.85) 1px, transparent 1px) 0 0/30px 30px;
}
.seo-hero__art--envelope:before {
  content: "";
  position: absolute;
  right: 14px;
  top: 30px;
  width: 132px;
  height: 74px;
  border: 3px solid #2a6daf;
  border-radius: 4px;
  transform: rotate(-8deg);
  background:
    linear-gradient(32deg, transparent 49%, #2a6daf 50%, transparent 51%),
    linear-gradient(148deg, transparent 49%, #2a6daf 50%, transparent 51%);
}
.seo-hero__art--map:before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 100%;
  height: 96px;
  background:
    radial-gradient(circle at 18% 56%, #2a6daf 0 3px, transparent 4px),
    radial-gradient(circle at 44% 48%, #2a6daf 0 3px, transparent 4px),
    radial-gradient(circle at 74% 41%, #2a6daf 0 3px, transparent 4px),
    radial-gradient(circle at 31% 26%, rgba(42,109,175,.32) 0 1px, transparent 2px);
  background-size: auto, auto, auto, 7px 7px;
  border-radius: 12px;
}
.seo-hero__art--map:after {
  content: "";
  position: absolute;
  left: 24px;
  top: 36px;
  width: 190px;
  height: 52px;
  border-top: 2px solid #2a6daf;
  border-radius: 50%;
  transform: rotate(-7deg);
}
.seo-hero__art--docs:before,
.seo-hero__art--docs:after {
  content: "";
  position: absolute;
  border: 3px solid #2a6daf;
  background: #ffffff;
  border-radius: 4px;
}
.seo-hero__art--docs:before { right: 50px; top: 10px; width: 70px; height: 90px; transform: rotate(-7deg); }
.seo-hero__art--docs:after  { right: 20px; top: 28px; width: 74px; height: 80px; transform: rotate(5deg); }
.seo-hero__art--docs span:before,
.seo-hero__art--docs span:after {
  content: "";
  position: absolute;
  right: 34px;
  height: 3px;
  width: 54px;
  background: #2a6daf;
  border-radius: 99px;
}
.seo-hero__art--docs span:before { top: 52px; }
.seo-hero__art--docs span:after { top: 68px; width: 42px; }

@media (max-width: 900px) {
  .seo-hero { margin: 8px 6px 12px 6px; padding: 14px 16px 14px 18px; }
  .seo-hero__body, .seo-hero--wide .seo-hero__body { max-width: none; }
  .seo-hero__art { display: none; }
  .right .seo-hero h1, .seo-hero h1 { font-size: 21px; }
  .seo-hero__note { display: block; margin: 8px 0 0 0; }
}


/* v4 ultra-compact overrides: keep all elements, reduce vertical height further */
.seo-hero { min-height: 0 !important; }
.right .seo-hero h1,
.seo-hero h1 {
  font-size: 20px !important;
  line-height: 1.12 !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  letter-spacing: .1px !important;
  word-spacing: 0 !important;
}
.seo-hero p {
  font-size: 12px !important;
  line-height: 1.38 !important;
  margin: 0 0 3px 0 !important;
}
.seo-hero__chips span {
  min-height: 19px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 11.5px !important;
}
.seo-hero__btn,
.seo-hero__btn:link,
.seo-hero__btn:visited {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
}
@media (max-width: 900px) {
  .seo-hero { margin: 5px 6px 8px 6px !important; padding: 9px 14px 9px 16px !important; }
  .right .seo-hero h1, .seo-hero h1 { font-size: 18px !important; }
  .seo-hero__chips, .seo-hero__actions { margin-top: 5px !important; }
}

.seo-hero__art { transform: scale(.78); transform-origin: top right; }
.seo-hero--wide .seo-hero__art { transform: scale(.72); transform-origin: top right; }