/* ============================================================
   Primitives shared by EVERY widget in this plugin.
   Keeping them in one file, instead of repeating them per widget, means less
   CSS overall and the same look guaranteed across pages.
   Everything is scoped to .srweb; the tokens come from tokens.css.
   ============================================================ */

/* ---------- container ---------- */
/* max-width and padding come from custom properties: the theme fit
   (theme_fit_css) matches them to the site header, and each widget's
   "Container width" control can override them without needing !important. */
.srweb .wrap { width: 100%; max-width: var(--srw-wrap-max, 1200px); margin-inline: auto; padding-inline: var(--srw-wrap-pad, clamp(1.25rem, 4vw, 2.5rem)); }

/* ---------- vertical rhythm between sections ---------- */
/* Two "Normal" sections in a row add up to 5.06rem (= --sp-3xl), the same gap
   the original mockup had between blocks. */
.srweb .srw-sec { position: relative; scroll-margin-top: calc(var(--srw-nav-h, 0px) + 24px); }
.srweb .srw-pt-none { padding-top: 0; }
.srweb .srw-pt-xs { padding-top: .6rem; }
.srweb .srw-pt-sm { padding-top: 1.25rem; }
.srweb .srw-pt-md { padding-top: 2.53rem; }
.srweb .srw-pt-lg { padding-top: 3.8rem; }
.srweb .srw-pb-none { padding-bottom: 0; }
.srweb .srw-pb-xs { padding-bottom: .6rem; }
.srweb .srw-pb-sm { padding-bottom: 1.25rem; }
.srweb .srw-pb-md { padding-bottom: 2.53rem; }
.srweb .srw-pb-lg { padding-bottom: 3.8rem; }

/* ---------- eyebrow ---------- */
/* inline-block, NOT inline-flex. As a flex container, each run of text and the
   ® <sup> became separate flex items and the `gap` pushed them apart, leaving the
   mark floating away from "G-Rex". As inline-block everything flows as text and
   the accent line is placed with a margin instead. */
.srweb .eyebrow { display: inline-block; font-family: var(--font-display); font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink); margin: 0 0 var(--sp-md); }
.srweb .eyebrow::before { content: ""; display: inline-block; vertical-align: middle; width: 2.2em; height: 2px; background: var(--c-accent); margin-right: .8em; position: relative; top: -.1em; }
/* The eyebrow's letter-spacing also lands in front of the mark, so it is
   subtracted back out to keep ® tight against the word. */
.srweb .eyebrow sup.sr-reg { letter-spacing: normal; margin-left: -.18em; }

/* ---------- typography ---------- */
.srweb h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.03em; color: var(--c-ink); max-width: 30ch; margin: 0; }
.srweb h1 em { font-style: normal; background: linear-gradient(90deg, var(--c-ink-deep), var(--c-glow) 60%, var(--c-ink-deep)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: srwShine 8s var(--ease-out) infinite alternate; }
@keyframes srwShine { to { background-position: 100% 50%; } }
/* The ® inherits -webkit-text-fill-color:transparent from the gradient title and
   vanishes in several browsers, so an explicit colour is given back to it. */
.srweb h1 em sup.sr-reg, .srweb h1 sup.sr-reg { -webkit-text-fill-color: var(--c-ink); color: var(--c-ink); }
.srweb h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; color: var(--c-ink); margin: 0 0 var(--sp-md); }
.srweb h2 em { font-style: normal; color: var(--c-accent); }
.srweb h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; color: var(--c-ink-deep); margin: 0 0 var(--sp-md); }
.srweb p { font-size: 1.05rem; line-height: 1.7; color: var(--c-text); margin: 0 0 var(--sp-md); }
.srweb p:last-child { margin-bottom: 0; }
.srweb .srw-lead { font-size: 1.15rem; line-height: 1.55; color: var(--c-ink); font-weight: 500; max-width: 46em; margin: 0 0 var(--sp-lg); }
.srweb b, .srweb strong { color: var(--c-ink); font-weight: 800; }
.srweb sub, .srweb sup { line-height: 0; }
.srweb a { color: var(--c-ink); font-weight: 700; border-bottom: 1.5px solid var(--c-glow); text-decoration: none; transition: color .2s, border-color .2s; }
.srweb a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.srweb a:focus-visible, .srweb button:focus-visible, .srweb summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
/* The ® mark as a superscript. Base/AbstractWidget::render() wraps it. */
.srweb sup.sr-reg { font-family: var(--font-display); font-weight: inherit; font-size: .90em; line-height: 0; vertical-align: baseline; position: relative; top: -.04em; }
.srweb :is(h1, h2, h3, h4, h5, h6) sup.sr-reg { font-size: .70em; top: -.26em; }

/* ---------- lists with a cyan check marker ---------- */
.srweb .srw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.srweb .srw-list li { position: relative; padding: .1em 0 .1em 2em; font-size: 1.02rem; line-height: 1.55; color: var(--c-text); }
.srweb .srw-list li::before { content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%; background: var(--c-glow-soft); border: 1.5px solid var(--c-glow); }
.srweb .srw-list li::after { content: ""; position: absolute; left: 6px; top: .52em; width: 5px; height: 9px; border: solid var(--c-glow); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- buttons ---------- */
.srweb .btn { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: .85em 1.6em; border-radius: var(--r-btn); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s, color .2s; }
.srweb .btn-lbl { display: inline; white-space: nowrap; }
.srweb .btn-lg { padding: 1.05em 1.9em; font-size: 1.05rem; }
.srweb .btn-orange, .srweb a.btn-orange { background: var(--c-accent); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(249,115,22,.32); }
.srweb .btn-orange:hover, .srweb a.btn-orange:hover { background: var(--c-accent-hov); box-shadow: 0 12px 28px rgba(249,115,22,.4); transform: translateY(-2px); color: #fff; border-color: transparent; }
.srweb .btn-soft, .srweb a.btn-soft { background: var(--c-glow-soft); color: var(--c-ink-deep); border-color: var(--c-glow); box-shadow: none; }
.srweb .btn-soft:hover, .srweb a.btn-soft:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.srweb .btn-ghost, .srweb a.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.srweb .btn-ghost:hover, .srweb a.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.srweb .cta-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.srweb .arr { transition: transform .2s var(--ease-out); }
.srweb .btn:hover .arr { transform: translateX(3px); }

/* ---------- figures ---------- */
.srweb .srw-figure { margin: 0; }
.srweb .srw-figure img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--c-border); background: #fff; box-shadow: var(--sh-card); }
.srweb .srw-figure figcaption { font-size: .8rem; line-height: 1.5; color: var(--c-text-soft); margin-top: .7rem; padding-left: 1rem; border-left: 2px solid var(--c-border); }
.srweb .srw-figure figcaption a { font-weight: 600; }
.srweb .srw-cite { font-size: .82rem; line-height: 1.5; color: var(--c-text-soft); margin: .6rem 0 0; }

/* ---------- image placeholder ---------- */
.srweb .srw-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: var(--sp-lg); border-radius: var(--r-xl); border: 2px dashed rgba(34,211,238,.5); background: linear-gradient(160deg, var(--c-glow-soft), #fff 70%); color: var(--c-text-soft); }
.srweb .srw-ph svg { width: 44px; height: 44px; color: var(--c-glow); }
.srweb .srw-ph-tag { font-family: var(--font-display); font-weight: 800; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); }
.srweb .srw-ph-label { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--c-ink); max-width: 24ch; line-height: 1.3; }

/* ---------- data table ---------- */
.srweb .srw-table-wrap { overflow-x: auto; }
.srweb .srw-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-body); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-card); }
/* The reset in tokens/enforce sets `background:transparent` on :where(th,td), and
   Elementor's own reset paints cells too. Using direct-child selectors raises the
   specificity so the branded header always wins, whatever the load order. */
.srweb .srw-table > thead > tr > th { font-family: var(--font-display); font-weight: 800; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background-color: var(--c-ink); background-image: linear-gradient(160deg, var(--c-ink), var(--c-ink-deep)); padding: 1rem 1.2rem; text-align: left; border: 0; }
.srweb .srw-table tbody tr { transition: background var(--t-micro); }
.srweb .srw-table tbody tr:hover td { background: rgba(34,211,238,.05); }
.srweb .srw-table tbody td { padding: .95rem 1.2rem; font-size: 1rem; color: var(--c-text); border: 0; border-top: 1px solid var(--c-line); background: transparent; vertical-align: middle; font-variant-numeric: tabular-nums; }
.srweb .srw-table tbody td:first-child { font-family: var(--font-display); font-weight: 700; color: var(--c-ink-deep); }
.srweb .srw-table tbody td:last-child { font-weight: 600; color: var(--c-ink); }

/* ---------- split: text + media ---------- */
.srweb .srw-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.srweb .srw-split--top { align-items: start; }
.srweb .srw-split--rev .srw-split-txt { order: 2; }
.srweb .srw-split-txt { min-width: 0; }
.srweb .srw-split-txt > *:last-child { margin-bottom: 0; }
.srweb .srw-split-media { min-width: 0; }
@media (max-width: 860px) {
	.srweb .srw-split { grid-template-columns: 1fr; gap: var(--sp-xl); }
	.srweb .srw-split--rev .srw-split-txt { order: 0; }
}

/* ---------- section backgrounds ----------
   Alternate these down a page so it reads as bands instead of one flat sheet.
   Sizes are in rem so a tall section does not stretch the wash out of shape. */
.srweb .srw-sec { position: relative; }
.srweb .srw-bg-soft { background-color: #f7fafd; }
.srweb .srw-bg-mesh {
	background-color: #f6fafd;
	background-image:
		radial-gradient(ellipse 46rem 22rem at 6% 0%, rgba(34, 211, 238, .13), transparent 66%),
		radial-gradient(ellipse 40rem 20rem at 96% 100%, rgba(249, 115, 22, .07), transparent 64%);
	background-repeat: no-repeat;
}
.srweb .srw-bg-deep {
	background-color: #eef5fb;
	background-image:
		radial-gradient(ellipse 52rem 24rem at 82% -4%, rgba(34, 211, 238, .20), transparent 64%),
		radial-gradient(ellipse 44rem 22rem at 4% 104%, rgba(249, 115, 22, .10), transparent 62%);
	background-repeat: no-repeat;
}
/* Hairline where a section starts, for two tinted sections in a row. */
.srweb .srw-bg-rule { box-shadow: inset 0 1px 0 var(--c-border); }

/* A row that holds several widgets side by side cannot use the .wrap inside
   each widget — that would box each column, not the row. This boxes the row
   itself to the same width every section uses. The theme-fit CSS overrides the
   width the same way it does for .srweb, so it always matches the header. */
/* Elementor paints its containers with
   `:is(.elementor-section-wrap,[data-elementor-id]) > .e-con{max-width:min(100%,var(--width))}`,
   which ties in specificity with a single class and wins on load order: on a theme
   other than ScaleReady's the row went full width while the rest of the page stayed
   at 1200px, and it looked out of line.
   That is why the selector carries three classes. Width and margin go through
   variables so the theme fit (theme_fit_css) keeps deciding without having to
   fight specificity. */
.e-con.srw-row-boxed.srw-row-boxed {
	width: 100%;
	max-width: var(--srw-row-max, 1200px);
	margin-inline: auto;
	padding-inline: var(--srw-wrap-pad, clamp(1.25rem, 4vw, 2.5rem));
}
/* Inside a boxed row the row already provides the gutter; the widget's own
   .wrap must not add a second one, or columns sit deeper than the header. */
.srw-row-boxed .srweb { --srw-wrap-pad: 0px; }

/* ============================================================
   The button colour, restated in every state.
   The theme paints `a:hover` and Elementor's kit `.elementor-kit-N a:hover`
   with its cyan; a button that only declares the colour at rest loses the
   label as soon as you hover it. It is restated state by state instead of
   trusting inheritance — the same failure that showed up in the hero, in the
   comparison table and in the competition CTA.
   ============================================================ */
.srweb .btn-orange:active,
.srweb .btn-orange:focus,
.srweb .btn-orange:hover,
.srweb a.btn-orange:active,
.srweb a.btn-orange:focus,
.srweb a.btn-orange:hover { color: #fff; }
.srweb .btn-soft:active,
.srweb .btn-soft:focus,
.srweb .btn-soft:hover,
.srweb a.btn-soft:active,
.srweb a.btn-soft:focus,
.srweb a.btn-soft:hover { color: var(--c-ink-deep); }
.srweb .btn-ghost:active,
.srweb .btn-ghost:focus,
.srweb .btn-ghost:hover,
.srweb a.btn-ghost:active,
.srweb a.btn-ghost:focus,
.srweb a.btn-ghost:hover { color: #fff; }