border */
margin: 12px 10px; /* <-- added left/right space */
/* remove outer border; use subtle inner outline instead */
border: 0;
box-shadow: inset 0 0 0 1px rgba(148,163,184,.16);
background: rgba(15,23,42,.58); /* same code bg you’re using */
border-radius: 10px;
padding: 10px 12px;
overflow: auto;
}
/* Optional: when a is the very first element after summary, nudge down slightly */
.docs .entry-content details[open] > summary + pre{
margin-top: 14px;
}
/* ===== Docs shared layout (parents + singles) ============================== */
.docs-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 300px; /* content | sidebar */
gap:32px;
align-items:start;
}
.docs-content{ min-width:0; } /* prevent overflow with long titles */
.docs-sidebar{ position:sticky; top:100px; } /* nice sticky nav on large screens */
/* Responsive: stack sidebar below on mobile */
@media (max-width: 1024px){
.docs-layout{ grid-template-columns:1fr; }
.docs-sidebar{ position:static; margin-top:24px; }
}
/* ===== Breadcrumb spacing for the two index pages ========================= */
.docs-index .kb-breadcrumbs{
margin-top:50px;
margin-bottom:10px;
}
.docs-index .page-title{ margin:8px 0 24px; }
.kb-topic{ margin-bottom:28px; }
.kb-topic-title{ margin:18px 0 10px; }
.kb-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.kb-list li a:hover{ text-decoration:underline; }
/* Shared docs section padding */
.section-docs { padding: 50px 0; }
/* Grid used on index + single (kept for safety where referenced) */
.docs-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 28px;
}
@media (max-width: 980px){
.docs-grid { grid-template-columns: 1fr; }
.docs-aside { order: 2; }
}
/* Keep article content tidy */
.entry-content h1 { margin-top: 0; } /* we strip the first H1 anyway */
.entry-content img { max-width: 100%; height: auto; }
.entry-content ul { margin: 0 0 1rem 1.25rem; }
/* ======================= Download page (scoped) ======================= */
.page-template-page-download-php { --btn-radius: 22px; }
/* Shared spacing + unified buttons */
.page-template-page-download-php .section-tight{padding:50px 0 20px;}
.page-template-page-download-php .btn,
.page-template-page-download-php .button,
.page-template-page-download-php .cta-button,
.page-template-page-download-php .sasby-btn-3,
.page-template-page-download-php .windows-download-btn,
.page-template-page-download-php .pricing-cta{border-radius:var(--btn-radius)!important}
/* ---------- Hero ---------- */
.page-template-page-download-php .download-hero{padding:50px 0 0px;text-align:center}
.page-template-page-download-php .download-hero .stack{max-width:820px;margin-inline:auto}
.page-template-page-download-php .download-hero .muted{color:var(--muted)}
.page-template-page-download-php .download-hero .caption{opacity:.85}
.page-template-page-download-php .download-hero .btn{margin-top:12px}
.page-template-page-download-php .download-hero .hero-cta{margin:18px auto}
/* Download hero – requirements card */
.download-hero .req-card{
max-width: 780px; /* readable width */
margin: 12px auto 0; /* centered block under the version line */
padding: 14px 18px;
background: rgba(148,163,184,.06);
border: 1px solid var(--line);
border-radius: 12px;
text-align: left; /* fix the “centered bullets” issue */
box-shadow: 0 0 0 1px rgba(148,163,184,.04) inset;
}
.download-hero .req-title{
margin: 0 0 8px;
font-size: 1rem;
font-weight: 700;
color: var(--muted);
letter-spacing: .2px;
}
.download-hero .req-list{
margin: 0;
padding-left: 1.15rem; /* tidy bullet indent */
display: grid;
gap: 6px;
list-style: disc;
}
.download-hero .req-list li{
color: var(--text);
line-height: 1.6;
}
/* On widescreens, make it a two-column list */
@media (min-width: 960px){
.download-hero .req-list{
columns: 2;
column-gap: 28px;
}
.download-hero .req-list li{ break-inside: avoid; }
}
/* Optional: a little extra breathing room before the checksum details */
.download-hero .dl-details{ margin-top: 12px; }
/* === Download hero: center checksum exactly === */
/* Make sure the hero isn't flex so children don't get pushed */
.download-hero .dl-details{
display: block;
}
/* Center the label and keep it the same width as the code box (optional) */
.download-hero .dl-details summary{
max-width: 740px;
margin: 0 auto 8px;
text-align: center;
}
/* The itself: fixed max width and centered */
.download-hero .dl-details pre{
width: 100%;
max-width: 740px; /* the box width */
margin-inline: auto; /* <-- centers the block */
padding: 12px 16px;
border-radius: 10px;
background: rgba(148,163,184,.06);
border: 1px solid var(--line);
box-sizing: border-box;
overflow-x: auto;
}
/* Keep the code readable; center the block *contents* without centering each line */
.download-hero .dl-details pre code{
display: inline-block; /* centers as a box inside the pre */
text-align: left; /* lines stay left-aligned */
white-space: pre;
max-width: 100%;
}
/* If you previously added flex on the , remove it for the hero: */
.download-hero .dl-details pre{ display: block; } /* override any earlier 'display:flex' */
/* ---------- Agent section ---------- */
.page-template-page-download-php .download-agent h2{text-align:center}
.page-template-page-download-php .download-agent .section-lead{max-width:1100px;margin:0 auto 18px;text-align:center}
@media (min-width:1200px){
.page-template-page-download-php .download-agent .section-lead{white-space:nowrap}
}
/* Tab widget */
.page-template-page-download-php .tab-wrapper{background:#07122D;color:#94a3b8;padding-top:20px;padding-bottom:30px;border-radius:8px}
.page-template-page-download-php .tab-buttons{display:flex;border-bottom:1px solid #1e293b;margin-bottom:20px}
.page-template-page-download-php .tab-buttons label{
padding:10px 20px;cursor:pointer;font-weight:700;color:#e2e8f0;
border-bottom:3px solid transparent;transition:all .3s ease
}
.page-template-page-download-php .tab-buttons label:hover{background:#0f172a}
.page-template-page-download-php input[name="tabs"]{display:none}
.page-template-page-download-php .tabs .tab-content{display:none;padding-top:10px}
/* CSS radio highlight + JS fallback */
.page-template-page-download-php #tab-windows:checked ~ .tab-buttons label[for="tab-windows"],
.page-template-page-download-php #tab-linux:checked ~ .tab-buttons label[for="tab-linux"],
.page-template-page-download-php #tab-macos:checked ~ .tab-buttons label[for="tab-macos"],
.page-template-page-download-php .tab-buttons label.is-active{border-bottom-color:#3384F0;color:#3384F0}
.page-template-page-download-php #tab-windows:checked ~ .tabs #content-windows,
.page-template-page-download-php #tab-linux:checked ~ .tabs #content-linux,
.page-template-page-download-php #tab-macos:checked ~ .tabs #content-macos,
.page-template-page-download-php .tabs .tab-content.is-active{display:block}
/* Windows list spacing */
.page-template-page-download-php #content-windows ul{margin-top:8px}
.page-template-page-download-php #content-windows ul li{margin-bottom:8px;line-height:1.7}
.page-template-page-download-php #content-windows ul li:last-child{margin-bottom:0}
/* Download info (small note under CTAs) */
.page-template-page-download-php .download-info{margin-top:16px;font-size:13px;color:#64748b}
/* Linux table */
.page-template-page-download-php table.linux-table{width:100%;border-collapse:collapse;font-size:16px;color:#94a3b8}
.page-template-page-download-php table.linux-table th{
padding:10px;background:#0f172a;color:#e2e8f0;text-align:left;border-bottom:1px solid #1e293b
}
.page-template-page-download-php table.linux-table td{padding:10px;border-bottom:1px solid #1e293b}
.page-template-page-download-php table.linux-table a{color:#3384F0;text-decoration:none;word-break:break-all}
.page-template-page-download-php table.linux-table a:hover{text-decoration:underline}
.page-template-page-download-php .footnote{font-size:13px;color:#64748b;margin-top:15px}
/* ---------- 3-up cards (reuse home grid, just constrain) ---------- */
.page-template-page-download-php .cards-3{max-width:1100px;margin:24px auto 0;display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.page-template-page-download-php .cards-3{grid-template-columns:1fr}}
/* If your home already styles .info-card*, these are harmless; else they give a light skin */
.page-template-page-download-php .info-card{background:#081638;border:1px solid rgba(148,163,184,.22);border-radius:16px;padding:24px}
.page-template-page-download-php .info-card__title{color:#e2e8f0;margin:8px 0 6px}
.page-template-page-download-php .info-card__text{color:#94a3b8}
.page-template-page-download-php .info-card .btn{margin-top:10px}
/* ---------- Final centered CTA section ---------- */
.page-template-page-download-php .section.section-tight.center{text-align:center}
.page-template-page-download-php .section.section-tight.center .container{max-width:820px;margin-inline:auto}
.page-template-page-download-php .section.section-tight.center .btn{margin-top:14px}
.page-template-page-download-php .section.section-tight.center .section-lead{max-width:1100px;margin:0 auto 20px}
@media (min-width:1200px){
.page-template-page-download-php .section.section-tight.center .section-lead{white-space:nowrap}
}
/* Remove any visual divider between Agent section and cards */
.page-template-page-download-php .download-agent,
.page-template-page-download-php .download-agent + .section{border:0!important}
/* ===== Download page – fixes (buttons, centering, details, spacing) ===== */
/* 1) Use SAME visual as the CTA-banner footer button for all page buttons (scoped to main content) */
.page-template-page-download-php .site-main .btn,
.page-template-page-download-php .site-main a.button,
.page-template-page-download-php .site-main .cta-button,
.page-template-page-download-php .site-main .sasby-btn-3,
.page-template-page-download-php .site-main .windows-download-btn {
background: #0075CE;
color: #fff;
border: 0;
border-radius: var(--btn-radius,22px);
padding: 12px 18px;
font-weight: 600;
line-height: 1.1;
display: inline-block;
box-shadow: 0 8px 22px rgba(0,117,206,.25);
text-decoration: none;
/* Reset any ghost button styles that might leak in */
filter: none;
}
.page-template-page-download-php .site-main .btn:hover,
.page-template-page-download-php .site-main a.button:hover,
.page-template-page-download-php .site-main .cta-button:hover,
.page-template-page-download-php .site-main .sasby-btn-3:hover,
.page-template-page-download-php .site-main .windows-download-btn:hover {
filter: brightness(1.07);
}
/* 2) Make the FREE Download button centered in the hero */
.page-template-page-download-php .download-hero { text-align: center; }
.page-template-page-download-php .download-hero .hero-cta,
.page-template-page-download-php .download-hero .btn {
display: inline-block;
margin-left: auto; margin-right: auto;
}
/* 3) Fix code boxes (both hero and tabs) */
/* Hero (centered) */
.page-template-page-download-php .dl-details {
display: flex; flex-direction: column; align-items: center;
max-width: 820px; margin-inline: auto;
}
.page-template-page-download-php .dl-details summary {
cursor: pointer; font-weight: 600; color: #e2e8f0; text-align: center;
font-size: 13px; /* ADJUSTMENT 1: Set font size */
}
.page-template-page-download-php .dl-details summary:hover { color:#3384F0; }
/* Tab (left-aligned) */
.page-template-page-download-php details.custom-details {
display: flex; flex-direction: column;
max-width: 820px;
/* ADJUSTMENT 2: Remove centering */
margin-inline: 0;
align-items: flex-start;
}
.page-template-page-download-php details.custom-details summary {
cursor: pointer; font-weight: 600; color: #e2e8f0;
/* ADJUSTMENT 2: Remove centering */
text-align: left;
}
.page-template-page-download-php details.custom-details summary:hover { color:#3384F0; }
/*
FIX #1: Changed selector to ONLY target .
Applying box-model styles to both AND
caused layout bugs (like double margins/padding)
which made the text disappear.
*/
.page-template-page-download-php .dl-details pre,
.page-template-page-download-php details.custom-details pre {
width: 100%;
max-width: 740px; /* wide, but readable */
margin-top: 10px;
background: #1e293b;
color: #94a3b8 !important; /* Color is inherited by */
padding: 16px 18px;
border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; /* Font is inherited by */
font-size: 14px;
white-space: pre-wrap; /* wrap long lines */
word-break: break-word;
overflow-x: auto; /* allow horizontal scroll if needed */
text-align: left; /* keep code left aligned */
}
/* Keep the Agent intro centered (if it slipped) */
.page-template-page-download-php .download-agent .section-lead {
text-align: center;
margin-left: auto; margin-right: auto;
}
/* ======================= Demo page (scoped) ======================= */
/* Breadcrumbs */
.page-template-page-demo-php .demo-breadcrumbs {
/* ADJUSTMENT 2: Section-specific padding */
padding-top: 30px;
padding-bottom: 20px;
}
.page-template-page-demo-php .demo-breadcrumbs .breadcrumbs {
display: flex;
gap: .5rem;
align-items: center;
color: #94a3b8;
font-size: .95rem;
}
.page-template-page-demo-php .demo-breadcrumbs .breadcrumbs a { color: #c9d6e5; text-decoration: none; }
.page-template-page-demo-php .demo-breadcrumbs .breadcrumbs a:hover { color: #ffffff; }
.page-template-page-demo-php .demo-breadcrumbs .sep { opacity: .6; }
/* Section titles */
.page-template-page-demo-php .demo-section-title {
font-size: 1.5rem;
font-weight: 700;
color: #e2e8f0;
padding-bottom: .4rem;
border-bottom: 2px solid #0075CE;
display: inline-block;
margin-bottom: 1.25rem;
}
/* Screenshots section */
.page-template-page-demo-php #screenshots-widget {
/* ADJUSTMENT 2: Section-specific padding */
padding-top: 0px;
padding-bottom: 50px;
}
.page-template-page-demo-php #screenshots-widget .media-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
.page-template-page-demo-php #screenshots-widget .media-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.page-template-page-demo-php #screenshots-widget .media-item-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Videos section */
.page-template-page-demo-php #videos-widget {
/* ADJUSTMENT 2: Section-specific padding */
padding-top: 0px;
padding-bottom: 50px;
}
.page-template-page-demo-php #videos-widget .media-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Unified media grid items (used by screenshots & videos) */
.page-template-page-demo-php .media-item {
background: #0e1f31;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
transition: transform .25s ease, box-shadow .25s ease;
display: flex;
flex-direction: column;
}
.page-template-page-demo-php .media-item:hover {
transform: translateY(-4px);
box-shadow: 0 10px 22px rgba(0, 0, 0, .32);
}
.page-template-page-demo-php .media-item img {
width: 100%;
height: auto;
display: block;
}
.page-template-page-demo-php .media-content { padding: 1rem; flex: 1; }
.page-template-page-demo-php .media-item-title { font-weight: 600; color: #e2e8f0; }
.page-template-page-demo-php .media-item-description {
color: #94a3b8;
font-size: .95rem;
line-height: 1.55;
margin-top: .35rem;
}
/* Play button overlay (for videos) */
.page-template-page-demo-php .media-item-video-thumbnail { position: relative; display: block; }
.page-template-page-demo-php .play-button {
position: absolute;
inset: 0;
margin: auto;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(0, 0, 0, .55);
display: flex;
align-items: center;
justify-content: center;
transition: background-color .25s ease;
}
.page-template-page-demo-php .media-item-video-thumbnail:hover .play-button { background: rgba(0, 117, 206, .85); }
.page-template-page-demo-php .play-button::after {
content: '▶';
color: #fff;
font-size: 28px;
margin-left: 3px;
}
/* YouTube banner */
.page-template-page-demo-php .demo-youtube-cta {
/* ADJUSTMENT 2: Section-specific padding */
padding-top: 20px;
padding-bottom: 20px;
}
.page-template-page-demo-php .demo-youtube-cta .yt-card {
/* ADJUSTMENT 3: Removed gradient, border, and heavy shadow */
background: transparent;
border: none;
box-shadow: none;
border-radius: 24px;
padding: 28px;
text-align: center;
}
.page-template-page-demo-php .demo-youtube-cta .yt-left {
display: flex;
gap: .75rem;
justify-content: center;
align-items: center;
margin-bottom: .25rem;
}
/* ADJUSTMENT 3: Re-order title and icon */
.page-template-page-demo-php .demo-youtube-cta .yt-left h3 {
order: 1;
margin: 0; /* Remove default heading margins */
}
.page-template-page-demo-php .demo-youtube-cta .yt-left .yt-icon {
order: 2;
/* ADJUSTMENT 3: Set new icon size */
width: 64px;
height: 44px;
}
.page-template-page-demo-php .demo-youtube-cta .yt-sub {
color: #94a3b8;
max-width: 860px;
margin: .35rem auto 1rem;
}
/* ADJUSTMENT 3: Style button to match download page */
.page-template-page-demo-php .demo-youtube-cta .btn.btn-pill {
background: #0075CE;
color: #fff;
border: 0;
border-radius: 12px; /* Use the 12px pill radius */
padding: 12px 18px;
font-weight: 600;
line-height: 1.1;
display: inline-block;
box-shadow: 0 8px 22px rgba(0, 117, 206, .25); /* No inset shadow */
text-decoration: none;
}
.page-template-page-demo-php .demo-youtube-cta .btn:hover {
filter: brightness(1.07);
}
/* ================= Demo page — ThickBox restyle ================= */
/* (Consolidated and fixed) */
.page-template-page-demo-php #TB_overlay {
background: rgba(4, 12, 28, .88) !important;
}
.page-template-page-demo-php #TB_window {
background: #0e1f31 !important; /* dark viewer background */
border: 1px solid rgba(148, 163, 184, .25);
border-radius: 12px;
box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
color: #cbd5e1;
overflow: hidden; /* hide any white edges */
}
/* ADJUSTMENT 1: Hide the "Close" text in the top-left (inside the image link) */
.page-template-page-demo-php #TB_ImageOff .screen-reader-text {
display: none !important;
}
/* image area refinements */
.page-template-page-demo-php #TB_Image {
box-shadow: none !important;
}
.page-template-page-demo-php #TB_load { z-index: 999999; }
/* Move the close button to top-right and convert to an 'x' icon */
.page-template-page-demo-php #TB_closeWindowButton {
position: absolute;
top: 10px;
right: 12px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(15, 23, 42, .6);
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}
/* Style for the 'x' icon inside the close button */
.page-template-page-demo-php #TB_closeWindowButton::after {
content: "×";
position: absolute;
inset: 0;
margin: auto;
width: 100%;
height: 100%;
line-height: 34px;
text-indent: 0;
color: #fff; /* Keep the icon white */
font-size: 24px;
text-align: center;
font-weight: bold;
/* ADDED: Dark shadow to create a border */
text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}
/* Also, let's ensure the hover state is still present */
.page-template-page-demo-php #TB_closeWindowButton:hover {
background: rgba(0, 117, 206, .85);
}
/* Neutralize default title/bottom bars so they don't create white bars */
.page-template-page-demo-php #TB_title,
.page-template-page-demo-php #TB_secondLine,
.page-template-page-demo-php #TB_window * {
background-color: transparent !important;
border: 0 !important;
}
/* Caption + pager at the bottom */
.page-template-page-demo-php #TB_caption { color: #9fb1c9 !important; }
.page-template-page-demo-php #TB_ImageOff { background: transparent !important; }
.page-template-page-demo-php #TB_prev,
.page-template-page-demo-php #TB_next {
color: #7aa7ff !important;
text-decoration: none !important;
}
.page-template-page-demo-php #TB_prev:hover,
.page-template-page-demo-php #TB_next:hover { color: #bcd1ff !important; }
/* Hide the *other* "Close" word link near the bottom controls */
.page-template-page-demo-php #TB_secondLine a#TB_closeWindowButton {
display: none !important;
}
/* ======================= Order page (scoped) ======================= */
.page-template-page-order-php .section{padding:56px 0} /* global fallback */
/* Per-section paddings (adjust as needed) */
.page-template-page-order-php .pad-hero{padding-top:30px;padding-bottom:20px}
.page-template-page-order-php .pad-grid{padding-top:0px;padding-bottom:20px}
.page-template-page-order-php .pad-foot{padding-top:0px;padding-bottom:0px}
/* Breadcrumbs */
.page-template-page-order-php .breadcrumbs{
display:flex; gap:.5rem; align-items:center; color:#94a3b8; font-size:.95rem;
}
.page-template-page-order-php .breadcrumbs a{ color:#c9d6e5; text-decoration:none }
.page-template-page-order-php .breadcrumbs a:hover{ color:#ffffff }
.page-template-page-order-php .breadcrumbs .sep{ opacity:.6 }
/* Grid */
.page-template-page-order-php .order-grid{
display:grid; gap:40px; grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1024px){
.page-template-page-order-php .order-grid{ grid-template-columns:1fr; gap:28px }
}
/* Card */
.page-template-page-order-php .order-card{
background:transparent; text-align:left;
}
.page-template-page-order-php .order-icon{
--ring: rgba(51,132,240,.25);
width:88px;height:88px;border-radius:50%;
display:inline-grid; place-items:center;
border:1px solid var(--ring);
box-shadow:0 0 0 6px rgba(51,132,240,.06) inset;
margin-bottom:14px;
}
.page-template-page-order-php .order-icon img{ width:44px;height:44px; display:block }
.page-template-page-order-php .order-icon-link{ display:inline-block }
.page-template-page-order-php .order-title{
font-size:1.75rem; line-height:1.2; color:#e2e8f0; margin:.35rem 0 .35rem;
}
.page-template-page-order-php .order-title a{
color:inherit; text-decoration:none;
}
.page-template-page-order-php .order-title a:hover{ color:#ffffff }
.page-template-page-order-php .order-copy{ color:#94a3b8; margin:0 0 18px; }
/* Buttons match site CTA pills */
.page-template-page-order-php .order-btn{
background:#0075CE; color:#fff; border:0;
border-radius:22px; padding:12px 18px; font-weight:600; line-height:1.1;
box-shadow:0 8px 22px rgba(0,117,206,.25);
text-decoration:none; display:inline-block;
}
.page-template-page-order-php .order-btn:hover{ filter:brightness(1.07) }
/* Upgrade link under grid */
.page-template-page-order-php .order-upgrade{
text-align:center; margin-top:28px;
}
.page-template-page-order-php .order-upgrade a{
color:#0075CE; text-decoration:none;
}
.page-template-page-order-php .order-upgrade a:hover{ color:#bcd1ff; text-decoration:underline }
/* ===== Order page tweaks ===== */
.page-template-page-order-php { --btn-radius: 22px; } /* match header/footer */
.page-template-page-order-php .order-btn,
.page-template-page-order-php .order-card .btn {
border-radius: var(--btn-radius) !important; /* uniform pill radius */
}
/* Loosen copy lines under each card */
.page-template-page-order-php .order-copy{
line-height: 1.7; /* more breathing room */
}
/* (optional) if you want just a hair more visual gap between the two lines */
.page-template-page-order-php .order-copy span + br + span{
margin-top: 2px;
display: inline-block;
}
/* ================= Order – Calculator pages ================= */
/* ----- 1. Page Layout & Padding ----- */
.page-template-page-order-calc-php .section { padding: 48px 0; }
.page-template-page-order-calc-php .pad-head { padding-top: 30px; padding-bottom: 0px; }
.page-template-page-order-calc-php .pad-body { padding-top: 20px; padding-bottom: 20px; }
/* Breadcrumbs */
.page-template-page-order-calc-php .breadcrumbs {
display: flex;
gap: .5rem;
align-items: center;
color: #94a3b8;
font-size: .95rem;
}
.page-template-page-order-calc-php .breadcrumbs a { color: #c9d6e5; text-decoration: none; }
.page-template-page-order-calc-php .breadcrumbs a:hover { color: #ffffff; }
.page-template-page-order-calc-php .breadcrumbs .sep { opacity: .6; }
/* ----- 2. Calculator Main Column ----- */
.page-template-page-order-calc-php .calc-col { min-width: 0; }
.page-template-page-order-calc-php .calc-col form { margin-top: .25rem; }
/* Wrapper for table */
.page-template-page-order-calc-php .table-calc-bg {
background: rgba(148, 163, 184, .06);
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 10px;
padding: 14px 14px 10px;
margin-bottom: 22px;
overflow-x: auto;
}
/* Title number (e.g., "1.") */
.page-template-page-order-calc-php .table-calc-title {
font-size: 34px;
font-weight: 800;
color: #99b4ff;
line-height: 1;
margin-bottom: 6px;
}
/* Wrapper for Title number + Heading (e.g., "1. IPNetwork Monitor") */
.page-template-page-order-calc-php .calc-head {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 6px 0;
}
.page-template-page-order-calc-php .calc-head .table-calc-title {
margin: 0;
line-height: 1;
}
.page-template-page-order-calc-php .calc-head h1,
.page-template-page-order-calc-php .calc-head h2,
.page-template-page-order-calc-php .calc-head h3 {
margin: 0;
line-height: 1.05;
position: relative;
top: -4px; /* Lifts heading to align better */
}
/* ----- 3. Calculator Table ----- */
.page-template-page-order-calc-php .table-calc {
border-collapse: collapse;
color: #cbd5e1;
width: 100% !important; /* Use full width of wrapper */
table-layout: fixed; /* Use fixed layout for column widths */
}
/* Kill any inline width attributes from the HTML */
.page-template-page-order-calc-php .table-calc[width],
.page-template-page-order-calc-php .table-calc th[width],
.page-template-page-order-calc-php .table-calc td[width] {
width: auto !important;
}
/* Base table header/cell styles */
.page-template-page-order-calc-php .table-calc th {
text-align: left;
font-weight: 600;
color: #e2e8f0;
border-bottom: 1px solid rgba(148, 163, 184, .18);
padding: 10px 12px;
}
.page-template-page-order-calc-php .table-calc td {
padding: 12px;
border-bottom: 1px solid rgba(148, 163, 184, .12);
}
/* Column-specific widths */
.page-template-page-order-calc-php .table-calc th:nth-child(1),
.page-template-page-order-calc-php .table-calc td:nth-child(1) { width: 44%; } /* Product edition */
.page-template-page-order-calc-php .table-calc th:nth-child(2),
.page-template-page-order-calc-php .table-calc td:nth-child(2) { width: 14%; } /* Monitors */
.page-template-page-order-calc-php .table-calc th:nth-child(3),
.page-template-page-order-calc-php .table-calc td:nth-child(3) { width: 14%; } /* Agents */
.page-template-page-order-calc-php .table-calc th:nth-child(4),
.page-template-page-order-calc-php .table-calc td:nth-child(4) { width: 14%; } /* SNMP/WMI */
.page-template-page-order-calc-php .table-calc th:nth-child(5),
.page-template-page-order-calc-php .table-calc td:nth-child(5) {
width: 14%; /* Price */
white-space: nowrap;
text-align: right;
padding-right: 12px;
}
/* Table interactivity */
.page-template-page-order-calc-php .table-calc tr:hover:not(.tr-no-hover) {
background: rgba(148, 163, 184, .06);
}
.page-template-page-order-calc-php .table-calc tr.tr-select {
background: rgba(51, 132, 240, .14);
outline: 1px solid rgba(51, 132, 240, .35);
}
.page-template-page-order-calc-php .table-calc input[type="radio"] {
accent-color: #3384F0;
transform: translateY(1px);
}
/* ----- 4. Table Helper Tooltips & Hidden Elements ----- */
.page-template-page-order-calc-php .table-calc th .info-tip {
display: inline-block;
width: 16px;
height: 16px;
margin-left: 6px;
vertical-align: middle;
opacity: .85;
cursor: help;
background: url("../img/info.svg") no-repeat center / 16px 16px;
}
.page-template-page-order-calc-php .table-calc th .info-tip:hover { opacity: 1; }
/* Hide all legacy helper links/text */
.page-template-page-order-calc-php .table-calc th .th-help,
.page-template-page-order-calc-php .table-calc th a.th-help,
.page-template-page-order-calc-php .table-calc th a[href="#"].th-help,
.page-template-page-order-calc-php .table-calc th a.img-help.stick,
.page-template-page-order-calc-php .table-calc th a.img-help.stick + img {
display: none !important;
}
/* ----- 5. Calculator Footer ----- */
.page-template-page-order-calc-php #your-choice {
background: #0f1f38;
color: #e2e8f0;
border-radius: 8px;
padding: 10px 12px;
font-weight: 600;
}
.page-template-page-order-calc-php #total_price {
font-size: 22px;
font-weight: 800;
text-align: center;
}
.page-template-page-order-calc-php .table-buy-now {
display: inline-block;
background: #0075CE;
color: #fff;
text-decoration: none;
padding: 12px 18px;
border-radius: 12px;
font-weight: 600;
box-shadow: 0 8px 22px rgba(0, 117, 206, .25);
}
.page-template-page-order-calc-php .table-buy-now:hover { filter: brightness(1.07); }
/* "Note: Basic 200..." box */
.page-template-page-order-calc-php #basic200-comment {
background: rgba(148, 163, 184, .08);
border: 1px dashed rgba(148, 163, 184, .28);
border-radius: 8px;
padding: 12px;
color: #cbd5e1;
}
/* Purchase terms */
.page-template-page-order-calc-php .purchase-terms {
margin-top: 24px;
color: #94a3b8;
}
.page-template-page-order-calc-php .purchase-terms summary {
font-weight: 900;
cursor: pointer;
color: #e2e8f0;
text-align: left !important; /* Final fix */
}
.page-template-page-order-calc-php .purchase-terms summary:hover { color: #3384F0; }
.page-template-page-order-calc-php .purchase-terms a { color: #7aa7ff; text-decoration: none; }
.page-template-page-order-calc-php .purchase-terms a:hover { color: #bcd1ff; text-decoration: underline; }
/* ----- 7. Media Queries ----- */
@media (max-width: 980px) {
/* Ensure horizontal scroll on table wrapper */
.page-template-page-order-calc-php .table-calc-bg { overflow-x: auto; }
}
@media (max-width: 560px) {
/* Allow title/heading to wrap on small screens */
.page-template-page-order-calc-php .calc-head,
.page-template-page-order-calc-php .calc-head .table-calc-title,
.page-template-page-order-calc-php .calc-head h1,
.page-template-page-order-calc-php .calc-head h2,
.page-template-page-order-calc-php .calc-head h3 {
display: inline;
line-height: 1.2;
top: 0;
}
}
/* Keep table header text + help icon on the same line */
.page-template-page-order-calc-php .table-calc th{
white-space: nowrap; /* don't wrap "SNMP, WMI" away from its icon */
line-height: 1.2;
}
/* === Order calc: 2-column layout and right-hand sticky sidebar === */
.page-template-page-order-calc-php .grid-2{
display:grid;
grid-template-columns: minmax(0, 1fr) 300px; /* main + 300px sidebar */
gap: 32px;
align-items: start;
}
/* Stack on narrow screens */
@media (max-width: 1100px){
.page-template-page-order-calc-php .grid-2{
grid-template-columns: 1fr;
}
}
/* ===================== 2-column reusable layout ===================== */
.layout-2col{
display:grid;
grid-template-columns: minmax(0,1fr) 300px; /* main + 300px sidebar */
gap:32px;
align-items:start;
}
@media (max-width: 1100px){
.layout-2col{ grid-template-columns: 1fr; }
}
/* ===================== Shared docs sidebar (same as Help/KB) ======== */
.docs-sidebar{ position:sticky; top:96px; } /* adjust if your header differs */
.docs-sidebar .kb-sidenav{
width:300px; /* Help/KB width */
padding:0; margin:0;
list-style:none;
}
.docs-sidebar .kb-sidenav { gap: 8px; }
.docs-sidebar .kb-sidenav a{
display:block;
padding:8px 12px;
border-radius:10px;
color:#c9d6e5; text-decoration:none;
}
.docs-sidebar .kb-sidenav a:hover{
background: rgba(148,163,184,.10);
color:#fff;
}
/* (Optional) if a theme reset forces full width on anchors */
.docs-sidebar .kb-sidenav li > a{ width:100%; box-sizing:border-box; }
/* ================= Support page (scoped) ================= */
/* ----- 1. Layout & Spacing ----- */
.page-support .pad-head { padding-top: 56px; padding-bottom: 20px; }
.page-support .pad-body { padding-top: 24px; padding-bottom: 56px; }
/* 2-column layout (reuses global .layout-2col) */
@media (max-width: 1100px) {
.page-support .layout-2col { grid-template-columns: 1fr; }
}
/* Spacing between content blocks in column 1 */
.page-support .support-col-intro { margin-bottom: 44px; }
.page-support .support-col-form { margin-bottom: 44px; }
/* ----- 2. Breadcrumbs ----- */
.page-support .breadcrumbs {
display: flex; gap: .5rem; align-items: center; color: #94a3b8; font-size: .95rem;
}
.page-support .breadcrumbs a { color: #c9d6e5; text-decoration: none; }
.page-support .breadcrumbs a:hover { color: #ffffff; }
.page-support .breadcrumbs .sep { opacity: .6; }
/* ----- 3. Content & Address ----- */
.page-support .support-h2 {
color: var(--heading, #e2e8f0);
}
.page-support .support-address {
color: #cbd5e1;
margin-top: 10px;
font-style: normal;
}
.page-support .support-address div {
line-height: 1.6;
}
/* ----- 4. NEW Table-Based Contact Form ----- */
.page-support .support-form-title {
color: var(--heading, #e2e8f0);
text-align: center;
margin-bottom: 18px; /* More space for a title */
}
/* Remove table default styling */
.page-support .support-form-table {
border-collapse: collapse;
border: none;
}
.page-support .support-form-table th,
.page-support .support-form-table td {
padding: 0;
border: none;
text-align: left;
padding-bottom: 14px; /* Replaces .form-row gap */
}
/* Form labels */
.page-support .support-form-table th {
font-weight: 600;
color: #e2e8f0;
padding-right: 15px;
white-space: nowrap;
}
.page-support .support-form-table .muted { color: #94a3b8; font-weight: 400; }
.page-support .support-form-table .req { color: #ffb4b4; }
/* Form inputs */
.page-support #pform input[type="text"],
.page-support #pform input[type="email"],
.page-support #pform textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: #0f1f38;
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, .25);
border-radius: 10px;
padding: 10px 12px;
outline: none;
}
.page-support #pform textarea {
resize: vertical;
min-height: 140px;
}
.page-support #pform .help-text {
color: #94a3b8;
font-size: .9rem;
margin-top: 6px;
}
/* Radio buttons (re-using .radio-chip style) */
.page-support #pform .radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.page-support #pform .radio-chip {
display: inline-flex; align-items: center; gap: 8px;
background: #0f1f38; color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, .25);
border-radius: 10px; padding: 8px 12px; cursor: pointer; user-select: none;
/* Align with inputs */
transform: translateY(1px);
}
.page-support #pform .radio-chip input { accent-color: #0075CE; }
.page-support #pform .radio-chip:hover {
border-color: rgba(122, 167, 255, .55);
background: rgba(148, 163, 184, .08);
}
.page-support #pform .radio-chip input:focus-visible + span,
.page-support #pform .radio-chip:has(input:focus-visible) {
outline: 2px solid rgba(122, 167, 255, .75);
outline-offset: 2px;
}
/* reCAPTCHA */
.page-support #pform .g-recaptcha {
display: inline-block; /* Allows centering */
max-width: 100%;
overflow: hidden;
}
/* Honeypot */
.page-support #pform .hp {
position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
/* Center reCAPTCHA and Submit button rows */
.page-support #pform td[colspan="2"] {
padding-top: 10px; /* Adds space above both */
text-align: center; /* Centers the content (button and reCAPTCHA) */
}
.page-support .support-submit {
background: #0075CE;
color: #fff;
border: 0;
border-radius: 12px;
padding: 12px 18px;
font-weight: 600;
font-size: 16px;
font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
box-shadow: 0 8px 22px rgba(0, 117, 206, .25);
cursor: pointer;
}
.page-support .support-submit:hover {
filter: brightness(1.07);
}
/* === Generic Page (article) styling =================================== */
.section-docs{ padding:50px 0; }
.breadcrumbs{ color:var(--muted); margin-bottom:10px; font-size:.95rem; }
.breadcrumbs a{ color:var(--text); opacity:.9; text-decoration:none; }
.breadcrumbs a:hover{ color:#e2e8f0; opacity:1; }
/* Grid like Help/KB parents */
.docs-grid{
display:grid; gap:40px;
grid-template-columns:minmax(0,1fr) 340px;
align-items:start;
}
@media (max-width:1100px){
.docs-grid{ grid-template-columns:1fr; }
.docs-aside{ order:2; }
}
.page-title{ color:var(--heading); margin:6px 0 22px; }
/* Article body */
.entry-content{ color:var(--text); }
.entry-content p{ margin:0 0 14px; }
.entry-content h2,.entry-content h3,.entry-content h4{
color:#e2e8f0; margin:26px 0 10px; font-weight:800;
}
.entry-content a{
color:#60a5fa;
text-decoration:underline dotted;
text-underline-offset:2px;
}
.entry-content a:hover{ color:#93c5fd; }
/* Lists */
.entry-content ul{ padding-left:20px; margin:12px 0; }
.entry-content li{ margin:6px 0; }
/* Tables in dark theme */
.entry-content table{
width:100%; border-collapse:separate; border-spacing:0;
background:rgba(2,6,23,.25);
border:1px solid #1e293b; border-radius:12px; overflow:hidden;
}
.entry-content th,
.entry-content td{ padding:12px 14px; border-bottom:1px solid #1e293b; }
.entry-content tr:last-child th,
.entry-content tr:last-child td{ border-bottom:0; }
.entry-content th{ color:#e2e8f0; text-align:left; font-weight:700; }
.entry-content tr:nth-child(even) td{ background:rgba(2,6,23,.35); }
/* Right sidebar (same look as KB/Help) */
.docs-aside .kb-sidenav{ display:grid; gap:10px; }
.docs-aside .kb-sidenav a{
display:block; padding:10px 14px; border-radius:10px;
background:rgba(148,163,184,.08); border:1px solid var(--line); color:#e2e8f0;
}
.docs-aside .kb-sidenav a:hover{
border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-veil);
}
/* === Generic Page (post_type=page) styling =================================== */
.section-docs{ padding:50px 0; }
.breadcrumbs{ color:var(--muted); margin-bottom:10px; font-size:.95rem; }
.breadcrumbs a{ color:var(--text); opacity:.9; text-decoration:none; }
.breadcrumbs a:hover{ color:#e2e8f0; opacity:1; }
/* Grid like Help/KB parents */
.docs-grid{
display:grid; gap:40px;
grid-template-columns:minmax(0,1fr) 340px;
align-items:start;
}
@media (max-width:1100px){
.docs-grid{ grid-template-columns:1fr; }
.docs-aside{ order:2; }
}
.page-title{ color:var(--heading); margin:6px 0 22px; }
/* Article body */
.entry-content{ color:var(--text); }
.entry-content p{ margin:0 0 14px; }
.entry-content h2,.entry-content h3,.entry-content h4{
color:#e2e8f0; margin:26px 0 10px; font-weight:800;
}
.entry-content a{
color:#0075CE;
text-decoration:underline dotted;
text-underline-offset:2px;
}
.entry-content a:hover{ color:#93c5fd; }
/* Lists */
.entry-content ul{ padding-left:20px; margin:12px 0; }
.entry-content li{ margin:6px 0; }
/* Tables in dark theme */
.entry-content table{
width:100%; border-collapse:separate; border-spacing:0;
background:rgba(2,6,23,.25);
border:1px solid #1e293b; border-radius:12px; overflow:hidden;
}
.entry-content th,
.entry-content td{ padding:12px 14px; border-bottom:1px solid #1e293b; }
.entry-content tr:last-child th,
.entry-content tr:last-child td{ border-bottom:0; }
.entry-content th{ color:#e2e8f0; text-align:left; font-weight:700; }
.entry-content tr:nth-child(even) td{ background:rgba(2,6,23,.35); }
/* Right sidebar (same look as KB/Help) */
.docs-aside .kb-sidenav{ display:grid; gap:10px; }
.docs-aside .kb-sidenav a{
display:block; padding:10px 14px; border-radius:10px;
background:rgba(148,163,184,.08); border:1px solid var(--line); color:#e2e8f0;
}
.docs-aside .kb-sidenav a:hover{
border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-veil);
}
/* Release Notes post_type=release-notes styling */
.section-doc { padding: 50px 0; }
.section-doc .crumbs { margin-bottom: 18px; color: var(--muted); }
.section-doc .crumbs a { color: var(--muted); text-decoration: none; }
.section-doc .crumbs a:hover { color: var(--brand); }
.section-doc .crumb-sep { margin: 0 6px; opacity: .6; }
.doc-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
}
@media (max-width: 1100px){
.doc-layout { grid-template-columns: 1fr; }
.doc-aside { order: 2; }
}
.doc-main { max-width: 860px; }
.doc-title { color: var(--heading); margin: 0 0 16px; }
.entry-content a { color: var(--brand); text-decoration: none; }
.entry-content a:hover { text-decoration: underline; }
/* Optional: tighten lists/tables like on docs */
.entry-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.entry-content th, .entry-content td {
border-bottom: 1px solid var(--line);
padding: 10px 12px;
}
.entry-content th { color: var(--heading); }
/* Reuse your KB sidenav visual */
.kb-sidenav { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kb-sidenav a {
display: block; padding: 10px 14px; border: 1px solid var(--line);
border-radius: 10px; color: var(--text); text-decoration: none; background: rgba(148,163,184,.05);
}
.kb-sidenav a:hover { border-color: var(--brand); color: #fff; box-shadow: 0 0 0 2px var(--brand-veil); }
/* ===== GL articles (post_type=gl) ==================================== */
:root{
/* default max width for content areas */
--content-max: 1240px;
--content-pad: 24px;
/* colors that match the theme */
--text: #94a3b8;
--heading: #e2e8f0;
--muted: #7c8aa6;
--brand: #0075CE;
}
.container{
width: min(var(--content-max), 100% - var(--content-pad) * 2);
margin-inline: auto;
}
/* Optional: slightly wider pages (GL / Release Notes) */
.container-wide{ --content-max: 1320px; }
/* --- Sections ----------------------------------------------------------- */
.section{ padding: 50px 0; } /* default vertical rhythm */
.section-docs{ padding: 50px 0; }
/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
font-size: .95rem;
color: var(--muted);
margin-bottom: 14px;
}
.breadcrumbs a{ color:#9cc4ff; text-decoration:none; }
.breadcrumbs a:hover{ color:#c7e0ff; text-decoration:underline; }
/* supports both - … and flat spans */
.breadcrumbs li{ list-style:none; }
.breadcrumbs li+li::before,
.breadcrumbs .crumb+.crumb::before{
content: "/";
color: var(--muted);
margin: 0 8px;
}
/* --- Titles ------------------------------------------------------------- */
.page-title{
color: var(--heading);
font-weight: 900;
font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
line-height: 1.2;
margin: 8px 0 20px;
}
/* --- Two-column grid (content + right sidebar) ------------------------- */
.docs-grid{
display:grid;
grid-template-columns: minmax(0,1fr) 300px; /* main | sidebar */
gap: 32px;
}
@media (max-width: 1024px){
.docs-grid{ grid-template-columns: 1fr; }
}
/* --- Article content ---------------------------------------------------- */
.article-content{
color: var(--text);
line-height: 1.7;
font-size: 1rem;
}
.article-content h2,
.article-content h3,
.article-content h4{
color: var(--heading);
margin: 28px 0 12px;
line-height: 1.3;
}
.article-content h2{ font-size: 1.6rem; }
.article-content h3{ font-size: 1.3rem; }
.article-content h4{ font-size: 1.15rem; }
.article-content p{ margin: 12px 0; }
.article-content ul,
.article-content ol{ margin: 10px 0 16px 20px; }
.article-content li{ margin: 6px 0; }
/* links inside articles */
.article-content a{
color:#0075CE;
text-decoration:none;
}
.article-content a:hover{
color:#b7dcff;
text-decoration:underline;
}
/* responsive images */
.article-content img{
max-width:100%;
height:auto;
border-radius: 6px;
}
/* tables */
.article-content table{
width:100%;
border-collapse: collapse;
margin: 16px 0 24px;
font-size: .95rem;
}
.article-content thead th{
color: var(--heading);
text-align: left;
border-bottom: 1px solid rgba(148,163,184,.25);
padding: 10px 12px;
}
.article-content td{
border-bottom: 1px solid rgba(148,163,184,.18);
padding: 10px 12px;
}
/* code blocks (inline) */
.article-content code{
background: rgba(148,163,184,.12);
border: 1px solid rgba(148,163,184,.18);
padding: 2px 6px;
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: .92em;
}
/* --- Sidebar (right) ---------------------------------------------------- */
.docs-sidebar{ align-self:start; }
/* your WP menu mapped to 'docs_sidebar' */
.kb-sidenav{
display:grid;
gap:10px;
margin-top: 6px;
}
.kb-sidenav li{ list-style:none; }
.kb-sidenav a{
display:block;
background: rgba(148,163,184,.06);
border:1px solid rgba(148,163,184,.16);
color: var(--heading);
padding: 10px 14px;
border-radius: 10px;
text-decoration:none;
}
.kb-sidenav a:hover{
border-color: var(--brand);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 26%, transparent);
}
/* --- Utilities ---------------------------------------------------------- */
.m-0{ margin:0!important; }
.mt-0{ margin-top:0!important; }
.mb-0{ margin-bottom:0!important; }
/* 404 quick links + recent lists (no search) */
.nf-quick{ margin:20px 0; }
.nf-links{ list-style:none; padding:0; margin:8px 0; display:grid; gap:8px; }
.nf-links a{ color:#0075CE; text-decoration:none; }
.nf-links a:hover{ text-decoration:underline; }
.nf-recent{
display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
gap:22px; margin-top:26px;
}
@media (max-width: 900px){ .nf-recent{ grid-template-columns:1fr; } }
.nf-list{ list-style:none; padding:0; margin:8px 0; display:grid; gap:8px; }
/* ================= Comparison pages (post_type=cmp) ================= */
.cmp-wrap { color: var(--text); }
.cmp-container { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
/* --- Breadcrumbs in hero --- */
.cmp-breadcrumbs{
color: var(--muted);
font-size: .95rem;
margin: 4px 0 12px;
}
.cmp-breadcrumbs .crumb{ color: var(--text); }
.cmp-breadcrumbs .crumb:hover{ color: var(--heading); text-decoration: underline; }
.cmp-breadcrumbs .crumb-sep{ margin: 0 6px; color: var(--muted); }
.cmp-breadcrumbs .current{ color: var(--muted); }
/* --- Hero --- */
.cmp-hero { padding: 56px 0 36px; }
.cmp-hero-grid {
display: grid; gap: 28px;
grid-template-columns: minmax(0,1fr) 520px;
align-items: center;
}
@media (max-width:1060px){ .cmp-hero-grid{ grid-template-columns: 1fr; } }
.cmp-title {
color: var(--heading);
font-weight: 900;
line-height: 1.15;
font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem);
margin: 0 0 12px;
}
.cmp-lead { color: var(--text); font-size:1.05rem; line-height:1.7; margin:0 0 18px; max-width: 60ch; }
.cmp-cta{
display:inline-flex; align-items:center; justify-content:center;
padding:12px 18px; border-radius:12px;
background: var(--brand); color:#fff; border:1px solid var(--brand);
box-shadow: 0 12px 26px rgba(0,117,206,.25);
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cmp-cta:hover{ transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0,117,206,.35); }
.cmp-hero-img{ width:100%; height:auto; border-radius:14px; box-shadow: 0 16px 50px rgba(0,0,0,.45); }
/* --- Table section --- */
.cmp-table-sec { padding: 32px 0 40px; }
.cmp-table-content table{
width:100%; border-collapse: separate; border-spacing:0;
background: rgba(148,163,184,.04);
border:1px solid var(--line); border-radius:12px; overflow: hidden;
}
.cmp-table-content thead th{
color: var(--heading); background: rgba(148,163,184,.08);
font-weight:800; text-align:left;
}
.cmp-table-content th,
.cmp-table-content td{
padding:12px 14px; border-bottom:1px solid var(--line);
}
.cmp-table-content tr:last-child td{ border-bottom:0; }
.cmp-table-content tbody tr:nth-child(even) td{ background: rgba(148,163,184,.03); }
/* Centered logo headers */
.cmp-table-content th.cmp-col-logo{
text-align: center;
}
.cmp-table-content th.cmp-col-logo img{
height: 28px;
width: auto;
display: block;
margin: 0 auto;
}
/* --- Other comparisons --- */
.cmp-more{ padding: 30px 0 56px; }
.cmp-more-grid{
display:grid; gap: 28px; grid-template-columns: 520px minmax(0,1fr);
align-items: start;
}
@media (max-width:1060px){ .cmp-more-grid{ grid-template-columns: 1fr; } }
.cmp-more-img{ width:100%; height:auto; border-radius:14px; box-shadow: 0 16px 50px rgba(0,0,0,.45); }
.cmp-more-title{ color: var(--heading); font-weight:900; margin:2px 0 12px; font-size:1.35rem; }
.cmp-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cmp-list a{ color: var(--link); }
.cmp-list a:hover{ color:#fff; text-decoration: underline; }
/* ===== Comparison – Section 3 (Other comparisons) ===== */
.cmp-more-grid{
display: grid;
grid-template-columns: 1fr 1fr; /* 50% | 50% */
gap: 28px;
align-items: start;
}
/* Center the content of the RIGHT column */
.cmp-more-grid > :nth-child(2){
text-align: center; /* center heading + links */
display: flex;
flex-direction: column;
align-items: center; /* center block-level children horizontally */
justify-content: center; /* vertical centering if column is taller */
gap: 12px;
}
/* (Optional) keep the image nicely contained */
.cmp-more-grid > :first-child img{
width: 100%;
height: auto;
border-radius: 12px;
display: block;
}
/* Mobile: keep stacking behavior */
@media (max-width: 980px){
.cmp-more-grid{ grid-template-columns: 1fr; }
.cmp-more-grid > :nth-child(2){ align-items: flex-start; text-align: left; }
}