/* TT Fors, the brand font: the same files the main site keeps in its own
   repository, blog/wp-content/se-common/fonts/tt-fors. */
@font-face { font-display: swap; font-family: "TT Fors"; font-style: normal; font-weight: 400; src: url("fonts/tt-fors/TT_Fors_Regular.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "TT Fors"; font-style: normal; font-weight: 500; src: url("fonts/tt-fors/TT_Fors_Medium.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "TT Fors"; font-style: normal; font-weight: 600; src: url("fonts/tt-fors/TT_Fors_DemiBold.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "TT Fors"; font-style: normal; font-weight: 700; src: url("fonts/tt-fors/TT_Fors_Bold.woff2") format("woff2"); }

/* =========================================================================
   SE Ranking Website Design System - foundation tokens
   (Colors / type scale / spacing / radius per Website UI Kit 2.0)
   ========================================================================= */
:root{
  --blue:            #123AF8;   /* Primary, CTA, links */
  --blue-dark:        #0400C7;  /* Hover states */
  --blue-darker:      #06164E;  /* Dark backgrounds */
  --blue-tint-300:    #7C93FA;
  --blue-tint-100:    #E4E9FE;

  --black:            #101423; /* H1-H4, primary text */
  --black-2:          #252E3D; /* secondary text, body */
  --grey-d1:          #717E95; /* tertiary text, labels, captions */
  --grey-d2:          #ADB9CD; /* placeholders, disabled */
  --grey-1:           #DCE4F1; /* borders, dividers */
  --grey-2:           #ECF1F9; /* subtle borders, hover bg */
  --grey-3:           #F6F8FC; /* section bg (alt), card bg */
  --white:            #FFFFFF;

  --mint:             #82FF82;
  --grassland:        #C4FFC4;
  --cyan:             #4CEAFF;
  --pale-cyan:        #D8F7FF;
  --sunflower:        #FCA311;
  --violet:           #5F31EC;

  --status-green:     #00CC66;
  --status-red:        #D61A3C;
  --input-stroke:      #BAC5DE;

  --r-sm: 8px;    /* buttons, inputs */
  --r-md: 12px;   /* badges, toggles */
  --r-lg: 20px;   /* cards, section blocks */
  --r-pill: 9999px;

  /* spacing rhythm (Desktop L -> Mobile) */
  --v1: 96px;      --v1-m: 48px;
  --half-v1: 48px; --half-v1-m: 24px;
  --v2: 32px;      --v2-m: 20px;
  --v3: 28px;      --v3-m: 20px;
  --v4: 16px;      --v4-m: 12px;

  --font-brand: "TT Fors", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* The spacing steps of the main site's uikit, so the shared blocks match it
     at every breakpoint rather than only at the one they were checked on. */
  --spacing-h1: 16px;
  --spacing-v1: 48px;
  --spacing-v2: 24px;
  --spacing-v4: 12px;
  --spacing-half-of-v1: 24px;
  --spacing-container-max-width: 1920px;
  --spacing-grid-8: 100%;
}

@media screen and (min-width: 768px){
  :root{ --spacing-h1: 24px; --spacing-v1: 80px; --spacing-v2: 32px; --spacing-half-of-v1: 40px; }
}
@media screen and (min-width: 1024px){
  :root{
    --spacing-h1: 32px; --spacing-v1: 88px; --spacing-half-of-v1: 44px;
    --spacing-grid-8: calc((calc((100% - 264px) / 12) * 8) + (24px * 7));
  }
}
@media screen and (min-width: 1280px){
  :root{ --spacing-h1: 64px; --spacing-v1: 112px; --spacing-v2: 40px; --spacing-half-of-v1: 56px; }
}
@media screen and (min-width: 1536px){
  :root{ --spacing-h1: 96px; --spacing-v1: 136px; --spacing-v2: 48px; --spacing-v4: 16px; --spacing-half-of-v1: 68px; }
}
@media screen and (min-width: 1920px){
  :root{ --spacing-h1: 156px; --spacing-v1: 160px; --spacing-v2: 56px; --spacing-half-of-v1: 80px; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--grey-3);
  color: var(--black-2);
  font-family: var(--font-brand);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}
h1, h2, h3, h4, p, ul { margin: 0; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

.container {
  max-width: var(--spacing-container-max-width);
  margin: 0 auto;
  padding-left: var(--spacing-h1);
  padding-right: var(--spacing-h1);
}

/* ---------- SE Ranking type scale (se-title / se-text) ---------- */
.se-title { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.01em; color: var(--black); line-height: 1.2; }
/* The uikit heading scale in full, so the shared blocks grow with the viewport
   the way they do on the main site instead of stopping at one breakpoint.
   Weight, colour and line-height belong to the class as well: the FAQ title
   and the Q/A letters carry no other class to get them from. */
.heading-1, .heading-2, .heading-3, .heading-4 {
  font-weight: 600; color: var(--black); margin: 0;
}
.heading-1, .heading-2, .heading-3 { line-height: 120%; }
.heading-1 { font-size: 36px; letter-spacing: -0.01em; }
.heading-2 { font-size: 28px; letter-spacing: -0.01em; }
.heading-3 { font-size: 24px; letter-spacing: -0.01em; }
.heading-4 { font-size: 20px; line-height: 128%; letter-spacing: -0.01em; }
@media screen and (min-width: 768px){
  .heading-1 { font-size: 44px; letter-spacing: -0.02em; }
  .heading-2 { font-size: 32px; letter-spacing: -0.02em; }
}
@media screen and (min-width: 1280px){
  .heading-1 { font-size: 48px; }
  .heading-2 { font-size: 36px; }
}
@media screen and (min-width: 1536px){
  .heading-1 { font-size: 56px; }
  .heading-2 { font-size: 44px; }
  .heading-3 { font-size: 28px; }
  .heading-4 { font-size: 24px; }
}
@media screen and (min-width: 1920px){
  .heading-1 { font-size: 68px; }
  .heading-2 { font-size: 48px; }
  .heading-3 { font-size: 32px; }
}

.se-text { font-family: var(--font-brand); line-height: 140%; color: var(--black-2); }
.se-text_hero { font-size: 20px; color: var(--black-2); }
.se-text_body { font-size: 16px; }
.se-text_body-2 { font-size: 14px; color: var(--grey-d1); }
.se-text_body-3 { font-size: 12px; color: var(--grey-d1); }
@media screen and (min-width: 1536px){
  .se-text_hero { font-size: 24px; }
  .se-text_body { font-size: 20px; }
  .se-text_body-2 { font-size: 16px; }
  .se-text_body-3 { font-size: 14px; }
}
.se-text_demibold { font-weight: 600; }
.se-text_medium { font-weight: 500; }
.se-text_regular { font-weight: 400; }
.se-text-ibm { font-family: var(--font-mono); letter-spacing: 0.02em; }
.se-text-ibm_caps-1 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.se-text-ibm_caps-2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }

/* ---------- buttons (se-btn) ---------- */
.se-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-brand); font-weight: 500; text-decoration: none; cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid transparent; white-space: nowrap;
}
/* The uikit source says a flat 64px, but the live site overrides it further
   down the cascade into a responsive pair: 46px below 1536, 64px above. */
.se-btn_large { height: auto; padding: 17px 31px; font-size: 20px; line-height: 28px; }
@media screen and (max-width: 1535px){
  .se-btn_large { padding: 11px 24px; font-size: 16px; line-height: 22px; }
}
.se-btn_small { height: 40px; padding: 7px 23px; font-size: 15px; }
.se-btn_main { background: var(--blue); color: var(--white); }
.se-btn_main:hover { background: var(--blue-dark); color: var(--white); }
.se-btn_main-dark { background: var(--mint); color: var(--black); }
.se-btn_main-dark:hover { background: #65E465; color: var(--black); }
.se-btn_main-dark:active { background: #58D158; color: var(--black); }
.se-btn_tertiary { background: transparent; border: 1px solid var(--black); color: var(--black); }
.se-btn_tertiary:hover { background: rgba(16,20,35,0.05); }
.se-btn_tert-dark { background: transparent; border: 1px solid rgba(255,255,255,0.55); color: var(--white); }
.se-btn_tert-dark:hover { border-color: #fff; }

.se-buttons-group-wrapper { display: grid; gap: 16px; }
.se-buttons-group { display: flex; grid-gap: 12px; gap: 12px; justify-content: center; }
.se-buttons-group__text { font-size: 12px; line-height: 140%; color: var(--grey-d1); text-align: center; }
@media (max-width: 767px){
  .se-buttons-group { flex-direction: column; width: 100%; }
  .se-buttons-group-wrapper, .se-buttons-group .se-btn { width: 100%; }
}

/* ---------- page head ---------- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--half-v1) 0 var(--v2); flex-wrap: wrap; gap: 16px;
}
@media (max-width: 640px){ .page-head{ padding: var(--half-v1-m) 0 var(--v2-m); } }
.page-sub { margin-top: 8px; max-width: 640px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); border: 1px solid var(--grey-1); border-radius: var(--r-pill);
  padding: 7px 13px; font-size: 12.5px; color: var(--black-2); font-weight: 500;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-green); }
.badge_stale .dot { background: var(--sunflower); }
.header-right { text-align: right; }
.updated { font-size: 12px; color: var(--grey-d1); margin-top: 8px; }

/* ---------- filter bar ---------- */
/* Styled after the dropdown cards of the site header: white, hairline border,
   the same soft shadow. */
.page-busy {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
/* Any display value outranks the browser's own rule for [hidden], so the
   card would show from the moment the page loads. */
.page-busy[hidden] { display: none; }
.page-busy-card {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: var(--white); border: 1px solid var(--grey-2); border-radius: var(--r-md);
  box-shadow: 0 4px 6px 1px rgba(0, 0, 0, .05), 0 12px 32px rgba(16, 20, 35, .08);
  font-family: var(--font-brand); font-size: 15px; line-height: 1.4; color: var(--black);
}
.page-busy-spinner {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--grey-2); border-top-color: var(--blue);
  animation: page-busy-spin .8s linear infinite;
}
@keyframes page-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .page-busy-spinner { animation-duration: 2.4s; }
}

/* The controls themselves are disabled by script while the next page is on
   its way - a second change would only throw the first one away. */
.filters.is-busy { cursor: progress; }
.filters.is-busy :disabled { opacity: .5; cursor: progress; }

.filters {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--grey-1);
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: var(--v1);
}
@media (max-width: 640px){ .filters{ margin-bottom: var(--v1-m); } }
.filters label { font-family: var(--font-mono); font-size: 10.5px; color: var(--grey-d1); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
.fgroup { display: flex; flex-direction: column; }
.fgroup[hidden] { display: none; }
select, input[type="date"] {
  font-family: var(--font-brand); font-size: 14px; color: var(--black);
  background: var(--white); border: 1px solid var(--input-stroke); border-radius: var(--r-sm);
  padding: 9px 12px; min-width: 138px;
}
/* The native arrow sits against the border whatever the padding, so it is
   drawn here instead, with the same inset from the edge as the text. */
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23101423' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}
select:focus, input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.filter-spacer { flex: 1; }
.toggle-group { display: flex; gap: 4px; background: var(--grey-2); border-radius: var(--r-sm); padding: 4px; }
.toggle-group button {
  border: none; background: transparent; font-size: 13.5px; font-weight: 500;
  padding: 7px 14px; border-radius: 6px; cursor: pointer; color: var(--grey-d1);
  font-family: var(--font-brand); transition: background .12s ease, color .12s ease;
}
.toggle-group button:hover { color: var(--black); }
.toggle-group button.active { background: var(--white); color: var(--black); border: 1px solid var(--grey-1); }

/* Submitting the form is what actually applies a filter, so the bar keeps a
   real submit control for keyboard and no-script use. Scripted browsers submit
   on change and this is hidden. */
.filters-apply { align-self: flex-end; }
.js .filters-apply { display: none; }

/* ---------- switch ---------- */
.switch-control { display: flex; align-items: center; gap: 10px; }
.switch-control-label { font-size: 13.5px; color: var(--black-2); font-weight: 500; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--grey-d2); transition: background-color .15s ease; border-radius: var(--r-pill);
}
.switch-slider:before {
  position: absolute; content: ""; height: 16px; width: 16px; left: 2px; top: 2px;
  background-color: #fff; transition: transform .15s ease; border-radius: 50%;
  border: 1px solid var(--grey-1);
}
.switch input:checked + .switch-slider { background-color: var(--status-green); }
.switch input:checked + .switch-slider:before { transform: translateX(16px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- cards / KPIs (se-card) ---------- */
.kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px){ .kpi-row{ grid-template-columns: 1fr; } }
.se-card {
  background: var(--white); border: 1px solid var(--grey-1); border-radius: var(--r-lg);
  padding: var(--v3) 24px;
}
@media (max-width: 640px){ .se-card{ padding: var(--v3-m) 20px; } }
.kpi-label { font-family: var(--font-mono); font-size: 11px; color: var(--grey-d1); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 14px; }

.gauge-kpi { display: flex; align-items: center; gap: 18px; }
.gauge-num { font-size: 36px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--black); }
.gauge-cap { font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.gauge-scale-row { display:flex; justify-content: space-between; font-size: 10.5px; color: var(--grey-d1); margin-top: 4px; width: 128px; }

.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--black); }
.kpi-value.small { font-size: 20px; }
.kpi-delta { font-size: 13px; margin-top: 12px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.kpi-delta.up { color: var(--status-red); }
.kpi-delta.down { color: var(--status-green); }
.kpi-delta.flat { color: var(--grey-d1); }
.kpi-foot { font-size: 12px; color: var(--grey-d1); margin-top: 10px; }
.mini-compare { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.mini-compare-bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--grey-2); position: relative; overflow: hidden; }
.mini-compare-bar span { position: absolute; top:0; left:0; height: 100%; border-radius: var(--r-pill); }

/* ---------- section rhythm ---------- */
.section { padding-top: var(--v1); }
@media (max-width: 640px){ .section{ padding-top: var(--v1-m); } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--v2); flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px){ .section-head{ margin-bottom: var(--v2-m); } }
.section-title { font-size: 19px; font-weight: 600; color: var(--black); }
.section-sub { font-size: 13.5px; color: var(--grey-d1); margin-top: 3px; }

.chart-card { background: var(--white); border: 1px solid var(--grey-1); border-radius: var(--r-lg); padding: 22px 24px; }
@media (max-width: 640px){ .chart-card{ padding: 18px; } }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.two-col_single { grid-template-columns: 1fr; }
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }

.legend-row { display: flex; gap: 20px; align-items: center; margin-top: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--grey-d1); }
.legend-item { display: flex; align-items: center; gap: 7px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.legend-line { width: 16px; height: 2px; border-radius: 1px; }
.legend-dash { width: 16px; height: 0; border-top: 2px dashed var(--grey-d1); }

/* ---------- position-band tiles ---------- */
.transition-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px){ .transition-row{ grid-template-columns: 1fr; } }
.transition-row_stack { grid-template-columns: 1fr; gap: 14px; }
.transition-row_line { display: flex; flex-wrap: wrap; gap: 16px; }
.transition-row_line .t-card { flex: 1 1 0; min-width: 0; }
@media (max-width: 1023px){ .transition-row_line .t-card{ flex-basis: calc(50% - 8px); } }
@media (max-width: 640px){ .transition-row_line .t-card{ flex-basis: 100%; } }
.t-card { background: var(--white); border: 1px solid var(--grey-1); border-radius: var(--r-lg); padding: 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.t-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.t-icon.good { background: rgba(0,204,102,0.12); color: var(--status-green); }
.t-icon.critical { background: rgba(214,26,60,0.10); color: var(--status-red); }
.t-icon.warning { background: rgba(252,163,17,0.16); color: #92600A; }
.t-label { font-size: 13.5px; font-weight: 600; color: var(--black); }
.t-value { font-size: 24px; font-weight: 700; color: var(--black); }
.t-sub { font-size: 12px; color: var(--grey-d1); line-height: 1.5; }

/* ---------- differentiator splits ---------- */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px){ .diff-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .diff-grid{ grid-template-columns: 1fr; } }
.diff-card { background: var(--white); border: 1px solid var(--grey-1); border-radius: var(--r-lg); padding: 18px 18px; }
.diff-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--black); }
.diff-bars { display: flex; align-items: flex-end; gap: 16px; height: 92px; padding: 0 8px; margin-top: 24px; }
.diff-bar-wrap { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; }
.diff-bar { width: 100%; border-radius: 4px 4px 0 0; position: relative; }
.diff-bar .val { position: absolute; top: -19px; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--black); }
.diff-bar-label { font-size: 11px; color: var(--grey-d1); margin-top: 8px; text-align: center; line-height: 1.3; }

/* ---------- content blocks ---------- */
.content-card .se-text { margin: 0 0 14px; }
.content-card .se-text:last-child { margin-bottom: 0; }

.band-list { list-style: none; margin: 2px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.band-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--black-2); line-height: 1.6; }
.band-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.band-list b { color: var(--black); }

/* ---------- notices and empty states ---------- */
.notice {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--r-lg); padding: 14px 18px; font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--grey-1); background: var(--white); color: var(--black-2);
  margin-bottom: 16px;
}
.notice_warn { border-color: #F5D9A8; background: #FFF8EC; }
.notice b { color: var(--black); }
.notice-icon { flex-shrink: 0; font-weight: 700; color: var(--blue); }
.notice_warn .notice-icon { color: var(--sunflower); }
.empty-state {
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
  min-height: 160px; text-align: center; color: var(--grey-d1); font-size: 13.5px; padding: 24px;
}
.empty-state b { color: var(--black); font-size: 15px; font-weight: 600; }

/* ---------- title + text (se-title-text) ---------- */
.se-title-text { display: grid; align-content: start; }
.se-title-text[size="h2"] { grid-gap: 12px; }
.se-title-text[alignment="center"] { justify-items: left; }
.se-title-text[alignment="center"] .se-title,
.se-title-text[alignment="center"] .se-text { text-align: left; }
@media screen and (min-width: 768px){
  .se-title-text[alignment="center"] { justify-items: center; margin: 0 auto; }
  .se-title-text[alignment="center"] .se-title,
  .se-title-text[alignment="center"] .se-text { text-align: center; }
}
@media screen and (min-width: 1024px){ .se-title-text { max-width: 796px; } }
@media screen and (min-width: 1280px){
  .se-title-text { max-width: 956px; }
  .se-title-text[size="h2"] { grid-gap: 16px; }
}
@media screen and (min-width: 1536px){ .se-title-text { max-width: 1116px; } }
@media screen and (min-width: 1920px){ .se-title-text { max-width: 1336px; } }

/* ---------- CTA (se-cta-section) ---------- */
.se-cta-section__inner {
  background-color: var(--blue);
  border-radius: var(--r-lg);
  padding: var(--spacing-half-of-v1);
  display: grid;
  grid-gap: var(--spacing-v2);
  gap: var(--spacing-v2);
}
.se-cta-section__inner .se-title { color: #fff; }
.se-cta-section__inner .se-title-text .se-text { color: var(--grey-1); }
.se-cta-section__inner .se-buttons-group__text { color: #fff; opacity: .64; font-size: 16px; line-height: 120%; }

/* The two carved corners of the main site's CTA, on the same breakpoint it
   uses: below this the block is a plain rounded rectangle. They read as
   cut-outs, so they are painted in the page background, not in white. */
@media screen and (min-width: 1536px){
  .se-cta-section__inner {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='135' height='135' viewBox='0 0 135 135'%3E%3Cpath fill='%23F6F8FC' fill-rule='evenodd' clip-rule='evenodd' d='M135 135C125.983 135 117.338 131.419 110.972 125.048L9.89994 23.8975C3.56005 17.5526 0 8.95902 0 0V135H135Z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='81' height='46' viewBox='0 0 81 46'%3E%3Cpath fill='%23F6F8FC' fill-rule='evenodd' clip-rule='evenodd' d='M0 0C13.1202 0 23.7558 10.7694 23.7558 24.0546V43.1286C23.7558 44.9165 25.9225 45.806 27.1788 44.534L64.2022 7.04549C68.657 2.53407 74.6991 0 81 0H0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left -1px bottom, top right 160px;
  }
  .se-cta-section__inner .se-buttons-group__text { font-size: 20px; }
}

/* ---------- SE Visible (se-visible-section) ----------
   One column below 1024, left-aligned on phones and centred on tablets; a row
   above it, where the text takes 49% of the block at every width in the design. */
.se-visible-section__inner {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-v2);
  padding: var(--spacing-v2); background: #FFF7F3; border-radius: var(--r-lg);
}
.se-visible-section__bg { display: none; }
.se-visible-section__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-v2); width: 100%; }
.se-visible-section__logo { display: block; width: 136px; height: auto; }
.se-visible-section__btn { width: 100%; padding-right: 20px; background: #0D9488; color: var(--white); }
.se-visible-section__btn:hover { background: #0F766E; color: var(--white); }
.se-visible-section__btn img { width: 20px; height: 20px; }
.se-visible-section__screen, .se-visible-section__screen img { display: block; width: 100%; height: auto; }
@media screen and (min-width: 768px){
  .se-visible-section__inner { align-items: center; }
  .se-visible-section__bg {
    display: block; position: absolute; right: 0; bottom: 0; z-index: -1;
    width: auto; height: 490px; max-width: none; pointer-events: none;
  }
  .se-visible-section__content { align-items: center; max-width: 720px; text-align: center; }
  .se-visible-section__btn { width: auto; }
}
@media screen and (min-width: 1024px){
  .se-visible-section__inner { flex-direction: row; }
  .se-visible-section__bg { height: 100%; }
  .se-visible-section__content { flex: 0 0 49%; max-width: none; align-items: flex-start; text-align: start; }
  .se-visible-section__screen { flex: 1 1 0; min-width: 0; }
}
@media screen and (min-width: 1536px){
  .se-visible-section__logo { width: 159px; }
  .se-visible-section__btn { padding-right: 28px; }
  .se-visible-section__btn img { width: 24px; height: 24px; }
}

/* ---------- FAQ (se-faq-section) ----------
   Not an accordion: every answer is open on desktop, exactly as on the main
   site. On narrow screens a tall item is clamped and gets a Show more control. */
.se-faq-section__container { display: flex; flex-direction: column; grid-gap: var(--spacing-v2); gap: var(--spacing-v2); }
.se-faq-section__title { text-align: start; }
.se-faq-section__content {
  display: flex; flex-direction: column; width: 100%; margin: 0 auto;
  grid-gap: var(--spacing-v4); gap: var(--spacing-v4);
}
/* The main site's grey-background variant: borderless white cards, which is
   what reads correctly on this page's grey ground. */
.se-faq-section__item {
  position: relative; padding: 24px; border-radius: var(--r-lg);
  width: 100%; background-color: var(--white);
}
.se-faq-section__item-content { position: relative; display: flex; flex-direction: column; margin: 0 auto; grid-gap: 8px; gap: 8px; }
.se-faq-section__item-content-question { display: flex; gap: 12px; }
.se-faq-section__item-content-question h2 { text-align: start; }
.se-faq-section__item-question-q { color: var(--blue); text-align: start; }
.se-faq-section__item-content-answer { display: block; position: relative; color: var(--black); }
.se-faq-section__item-answer-a { position: absolute; top: 0; left: 0; color: var(--grey-d1); }
.se-faq-section__item-answer { width: 100%; padding: 0 0 0 32px; }
.se-faq-section__item-answer p { font-size: 16px; line-height: 140%; color: var(--black-2); margin: 0; }
.se-faq-section__item-answer p + p { margin-top: 12px; }
@media screen and (min-width: 1536px){
  .se-faq-section__item-answer p { font-size: 20px; }
}

.se-faq-section__item.limit-height { height: 260px; overflow: hidden; }
.se-faq-section__item.active .se-faq-section__item-content { height: auto; }
.se-faq-section__item-buttons {
  display: block; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 30%);
  position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; padding-top: 58px;
}
.se-faq-section__item-buttons.hidden { display: none; }
.se-faq-section__item.active .se-faq-section__item-buttons {
  position: static; width: auto; height: 60px; padding: 20px 0 0; background-image: none;
}
.se-faq-section__item-buttons .button__show-more,
.se-faq-section__item-buttons .button__show-less {
  display: flex; align-items: center; justify-content: center; padding: 20px 40px;
  color: var(--blue); border-top: 1px solid var(--grey-2); gap: 12px; cursor: pointer;
  font-size: 16px; font-weight: 500; line-height: 140%;
}
.se-faq-section__item-buttons.active .button__show-less { display: flex; }
.se-faq-section__item-buttons.active .button__show-more,
.se-faq-section__item-buttons .button__show-less { display: none; }

@media screen and (min-width: 768px){
  .se-faq-section__title { text-align: center; }
  .se-faq-section__item-content { grid-gap: 16px; gap: 16px; }
  .se-faq-section__item-buttons { display: none; }
  .se-faq-section__item.limit-height { height: auto; overflow: visible; }
}
@media screen and (min-width: 1024px){
  .se-faq-section__content { max-width: var(--spacing-grid-8); }
  .se-faq-section__item-content-question { gap: 16px; }
  .se-faq-section__item-answer { padding: 0 0 0 36px; }
}
@media screen and (min-width: 1536px){
  .se-faq-section__item { padding: 32px; }
  .se-faq-section__item-answer { padding: 0 0 0 40px; }
}

/* ---------- footer ---------- */

/* ---------- SVG chart chrome ---------- */
.svg-chart { width: 100%; height: auto; display: block; overflow: visible; }
.svg-chart .gridline { stroke: var(--grey-1); stroke-width: 1; }
.svg-chart .axis-label { fill: var(--grey-d1); font-size: 11px; font-family: var(--font-brand); }
.svg-chart .bar-label { fill: var(--black); font-size: 11.5px; font-weight: 700; font-family: var(--font-brand); }
.svg-chart .cat-label { fill: var(--black); font-size: 11.5px; font-family: var(--font-brand); }
.svg-chart .cat-label-top { fill: var(--black); font-size: 13.5px; font-weight: 600; font-family: var(--font-brand); }
.svg-chart .update-line { stroke: var(--grey-d1); stroke-width: 1.5; stroke-dasharray: 4 4; }
.svg-chart .update-label { fill: var(--black-2); font-size: 10.5px; font-family: var(--font-brand); font-weight: 600; }
.svg-chart .hover-bar:hover rect, .svg-chart .hbar-row:hover rect.hbar { filter: brightness(0.93); }
.chart-tooltip {
  position: absolute; pointer-events: none; background: var(--black); color: #fff;
  font-size: 12px; padding: 8px 10px; border-radius: var(--r-sm); opacity: 0; transition: opacity .1s;
  z-index: 10; line-height: 1.5; white-space: nowrap;
}

/* ---------- testing panel (QA_PANEL=1 only) ---------- */
.qa-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--blue-tint-100); border: 1px solid var(--blue-tint-300);
  border-radius: var(--r-lg); padding: 14px 18px; margin-bottom: 16px;
}
.qa-strip b { color: var(--blue-darker); }
.qa-strip .se-text_body-2 { color: var(--blue-darker); opacity: .8; }
.qa-strip form { display: inline; }
.qa-strip-spacer { flex: 1; }

.qa-progress {
  background: var(--white); border: 1px solid var(--grey-1);
  border-radius: var(--r-lg); padding: 18px; margin-bottom: 16px;
}
.qa-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.qa-bar { height: 10px; border-radius: var(--r-pill); background: var(--grey-2); overflow: hidden; }
.qa-bar span {
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--blue); transition: width .4s ease;
}
.qa-bar span.done { background: var(--status-green); }
.qa-bar span.failed { background: var(--status-red); }
.qa-log {
  background: var(--black); color: #d7e0f5; padding: 14px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; margin: 0;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- testing tools, folded away by default ---------- */
.qa-more { margin-bottom: 16px; }
.qa-more > summary {
  cursor: pointer; padding: 12px 18px; border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--grey-1);
  font-size: 14px; font-weight: 600; color: var(--black);
}
.qa-more[open] > summary { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none; }
.qa-more-inner {
  background: var(--white); border: 1px solid var(--grey-1); border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 20px 18px 22px;
}
.qa-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.qa-action {
  background: var(--grey-3); border: 1px solid var(--grey-1); border-radius: var(--r-md);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.qa-action p { font-size: 12.5px; color: var(--grey-d1); line-height: 1.5; flex: 1; margin: 0; }
table.qa { width: 100%; border-collapse: collapse; border: 1px solid var(--grey-1); border-radius: var(--r-md); overflow: hidden; }
table.qa th, table.qa td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--grey-2); font-size: 13px; }
table.qa th { background: var(--grey-3); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--grey-d1); }
table.qa tr:last-child td { border-bottom: none; }
.pill { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.pill.ok { background: rgba(0,204,102,.14); color: #067a41; }
.pill.bad { background: rgba(214,26,60,.12); color: var(--status-red); }
.pill.warn { background: rgba(252,163,17,.18); color: #92600A; }
.pill.run { background: var(--blue-tint-100); color: var(--blue); }
.qa-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.qa-tabs a { font-size: 12.5px; padding: 6px 12px; border-radius: var(--r-sm); text-decoration: none; background: var(--grey-2); color: var(--black-2); }
.qa-tabs a.on { background: var(--blue); color: #fff; }

/* ---- Scheduler card, testing panel only -------------------------------- */
.qa-sched {
  background: var(--white); border: 1px solid var(--grey-1);
  border-radius: var(--r-lg); padding: 18px; margin-bottom: 16px;
}
.qa-sched-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.qa-sched-head form { display: inline; }
.qa-sched-pending {
  background: var(--pale-cyan); border-radius: var(--r-sm);
  padding: 10px 12px; margin: 0 0 14px;
}