
/* Cyberocena v7.8 — account conversion landing page */
.account-benefits-page main { overflow: clip; }
.account-hero {
  position: relative;
  width: min(var(--max), calc(100% - 48px));
  min-height: 720px;
  margin: 0 auto;
  padding: 86px 0 96px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(42px, 6vw, 90px);
}
.account-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 720px;
  height: 720px;
  right: -180px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 18%, transparent), transparent 68%);
  pointer-events: none;
}
.account-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.account-kicker span { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent), 0 0 24px color-mix(in srgb, var(--primary) 72%, transparent); }
.account-hero h1 { max-width: 760px; margin: 20px 0 22px; font-size: clamp(48px, 5.2vw, 82px); line-height: .99; letter-spacing: -.055em; }
.account-hero h1 em { display: block; margin-top: 8px; color: var(--primary); font-style: normal; }
.account-hero-copy > p { max-width: 690px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.7; }
.account-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.account-hero-actions .button { min-height: 54px; padding-inline: 22px; border-radius: 13px; }
.account-primary-cta { min-width: 228px; }
.account-trust-list { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 0; margin: 28px 0 0; list-style: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.account-trust-list span { color: var(--primary); }

.account-dashboard-preview { position: relative; min-width: 0; border-radius: 26px; padding: 1px; background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 60%, transparent), color-mix(in srgb, var(--primary) 42%, transparent), var(--line)); box-shadow: 0 40px 100px rgba(0,0,0,.34); transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); transform-origin: center; }
.account-dashboard-preview::after { content: ""; position: absolute; inset: 10% -8% -12% 18%; z-index: -1; border-radius: 40px; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 20%, transparent), color-mix(in srgb, var(--primary) 14%, transparent)); filter: blur(38px); }
.preview-window-bar { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 17px; border-radius: 25px 25px 0 0; background: #091524; border-bottom: 1px solid rgba(139,174,219,.12); }
.preview-window-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #33475e; }
.preview-window-bar > span:nth-child(1) { background: #ff7b87; }
.preview-window-bar > span:nth-child(2) { background: #f6c764; }
.preview-window-bar > span:nth-child(3) { background: #54dfad; }
.preview-window-bar small { margin-left: auto; color: #7289a3; font-size: 10px; letter-spacing: .04em; }
.preview-layout { min-height: 480px; display: grid; grid-template-columns: 64px minmax(0, 1fr); overflow: hidden; border-radius: 0 0 25px 25px; background: #07111e; }
.preview-sidebar { display: flex; flex-direction: column; align-items: center; gap: 17px; padding: 18px 0; background: #0a1829; border-right: 1px solid rgba(139,174,219,.10); }
.preview-logo { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 10px; color: #06151f; background: linear-gradient(135deg, #5ce7c6, #5ca7ff); font-size: 13px; font-weight: 950; }
.preview-sidebar i { width: 28px; height: 28px; border-radius: 8px; background: rgba(139,174,219,.08); }
.preview-sidebar i.is-active { background: linear-gradient(135deg, rgba(91,166,255,.28), rgba(83,225,195,.18)); border: 1px solid rgba(97,168,255,.30); }
.preview-main { min-width: 0; padding: 24px; }
.preview-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.preview-head div { display: grid; }
.preview-head small { color: #7189a4; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.preview-head strong { margin-top: 4px; color: #eef6ff; font-size: 18px; }
.preview-head > span { color: #7189a4; font-size: 10px; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.preview-metrics article { min-width: 0; padding: 16px; border-radius: 14px; background: linear-gradient(145deg, rgba(20,40,67,.94), rgba(12,27,48,.98)); border: 1px solid rgba(130,168,218,.12); }
.preview-metrics small { display: block; color: #8196af; font-size: 10px; }
.preview-metrics strong { display: block; margin: 6px 0 4px; color: #f7fbff; font-size: 28px; line-height: 1; }
.preview-metrics strong span { color: #6f87a2; font-size: 11px; }
.preview-metrics > article > span { font-size: 9px; font-weight: 800; }
.preview-metrics .good { color: #58d9ae; }
.preview-metrics .warn { color: #f2bd5b; }
.preview-panels { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(180px, .75fr); gap: 12px; margin-top: 12px; }
.preview-chart-panel, .preview-activity { min-width: 0; padding: 17px; border-radius: 15px; background: linear-gradient(145deg, rgba(15,33,57,.98), rgba(10,24,43,.98)); border: 1px solid rgba(130,168,218,.12); }
.preview-chart-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-chart-panel strong, .preview-activity > strong { color: #edf6ff; font-size: 12px; }
.preview-chart-panel small { color: #7189a4; font-size: 9px; }
.preview-chart-panel svg { width: 100%; height: auto; margin-top: 15px; }
.chart-grid { stroke: rgba(121,157,204,.10); stroke-width: 1; }
.chart-area { fill: rgba(67,204,184,.10); stroke: none; }
.chart-line { fill: none; stroke: #55dfbf; stroke-width: 3; }
.preview-activity { display: grid; align-content: start; gap: 12px; }
.preview-activity p { display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 2px 8px; align-items: center; margin: 0; }
.preview-activity b { color: #cbd9e9; font-size: 10px; font-weight: 700; }
.preview-activity small { grid-column: 2; color: #667d98; font-size: 8px; }
.event-dot { width: 7px; height: 7px; border-radius: 50%; }
.event-dot.good { background: #59dfb3; }.event-dot.info { background: #62a8ff; }.event-dot.warn { background: #f3bd57; }

.account-value-strip { width: min(var(--max), calc(100% - 48px)); margin: 0 auto 110px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); }
.account-value-strip article { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 24px; border-right: 1px solid var(--line); }
.account-value-strip article:last-child { border-right: 0; }
.account-value-strip article > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); font-size: 11px; font-weight: 900; }
.account-value-strip div { display: grid; min-width: 0; }
.account-value-strip strong { font-size: 13px; }
.account-value-strip small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.account-comparison, .account-features, .account-workflow, .account-faq { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 100px 0; }
.account-section-head { max-width: 930px; margin: 0 auto 42px; text-align: center; }
.account-section-head-left { margin-left: 0; text-align: left; }
.account-section-head h2 { margin: 10px 0 14px; font-size: clamp(34px, 4vw, 56px); line-height: 1.08; letter-spacing: -.045em; }
.account-section-head p { max-width: 760px; margin: 0; color: var(--muted); font-size: 17px; }
.account-section-head:not(.account-section-head-left) p { margin-inline: auto; }
.comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.comparison-card { position: relative; display: flex; flex-direction: column; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 70%, var(--surface))); }
.comparison-account { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); box-shadow: 0 28px 80px color-mix(in srgb, var(--primary) 10%, transparent); }
.comparison-account::before { content: "Najczęściej wybierane"; position: absolute; top: 18px; right: 18px; padding: 6px 9px; border-radius: 999px; color: #05231d; background: var(--primary); font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.comparison-label { color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.comparison-card h3 { margin: 12px 0 10px; font-size: 31px; letter-spacing: -.035em; }
.comparison-card > p { min-height: 54px; margin: 0; color: var(--muted); }
.comparison-card ul { display: grid; gap: 12px; padding: 0; margin: 28px 0 32px; list-style: none; }
.comparison-card li { color: var(--text); font-size: 14px; }
.comparison-card li.is-muted { color: var(--muted-2); }
.comparison-card .button { align-self: flex-start; min-height: 48px; }

.account-features { width: min(var(--max), calc(100% - 48px)); }
.account-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.account-feature-grid article { position: relative; min-height: 275px; padding: 24px; border-radius: 20px; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 66%, var(--surface))); border: 1px solid var(--line); transition: .2s ease; }
.account-feature-grid article:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); box-shadow: 0 22px 50px rgba(0,0,0,.16); }
.feature-number { position: absolute; top: 20px; right: 20px; color: var(--muted-2); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.feature-icon-box { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 16%, var(--surface-2)), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); font-size: 12px; font-weight: 950; }
.account-feature-grid h3 { margin: 20px 0 9px; font-size: 19px; }
.account-feature-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.account-workflow { padding-bottom: 120px; }
.workflow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; counter-reset: step; }
.workflow-steps li { position: relative; min-height: 205px; padding: 25px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.workflow-steps li:not(:last-child)::after { content: "→"; position: absolute; top: 46px; right: -14px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--primary); background: var(--bg); border: 1px solid var(--line); font-weight: 900; }
.workflow-steps li > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #05231d; background: var(--primary); font-weight: 950; }
.workflow-steps strong { display: block; margin-top: 20px; font-size: 17px; }
.workflow-steps p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.account-security { width: min(1240px, calc(100% - 48px)); margin: 0 auto 120px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 54px; align-items: center; padding: 52px; border-radius: 28px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 36%), linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 74%, var(--surface))); border: 1px solid var(--line); }
.account-security h2 { margin: 10px 0 14px; font-size: clamp(33px, 3.7vw, 52px); line-height: 1.08; letter-spacing: -.045em; }
.account-security p { margin: 0 0 24px; color: var(--muted); }
.security-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.security-control-grid article { min-height: 125px; padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 46%, transparent); border: 1px solid var(--line); }
.security-control-grid span { color: var(--primary); font-size: 10px; font-weight: 900; }
.security-control-grid strong { display: block; margin-top: 15px; font-size: 14px; }
.security-control-grid small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }

.faq-list { max-width: 900px; margin: 0 auto; display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.faq-list summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 20px; cursor: pointer; list-style: none; font-weight: 800; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 9px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 20px 20px; color: var(--muted); }

.account-final-cta { width: min(1240px, calc(100% - 48px)); margin: 0 auto 110px; display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: 52px; border-radius: 28px; color: #061a22; background: linear-gradient(135deg, #59e6c3, #66afff); box-shadow: 0 30px 80px rgba(41,154,176,.22); }
.account-final-cta .section-kicker { color: #0b5361; }
.account-final-cta h2 { max-width: 760px; margin: 9px 0 10px; font-size: clamp(34px, 4vw, 55px); line-height: 1.04; letter-spacing: -.045em; }
.account-final-cta p { max-width: 720px; margin: 0; color: rgba(6,26,34,.72); }
.account-final-actions { display: flex; flex-wrap: wrap; gap: 10px; min-width: max-content; }
.account-final-actions .button-primary { color: #eef8ff; background: #071726; box-shadow: none; }
.account-final-actions .button-ghost { color: #0a2630; background: rgba(255,255,255,.28); border-color: rgba(6,26,34,.18); }

.account-benefits-page .footer { margin-top: 0; }

@media (max-width: 1180px) {
  .account-hero { grid-template-columns: 1fr; padding-top: 72px; }
  .account-hero-copy { max-width: 900px; text-align: center; margin-inline: auto; }
  .account-hero h1, .account-hero-copy > p { margin-inline: auto; }
  .account-hero-actions, .account-trust-list { justify-content: center; }
  .account-dashboard-preview { width: min(900px, 100%); margin-inline: auto; transform: none; }
  .account-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .account-security { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .account-value-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .account-value-strip article:nth-child(2) { border-right: 0; }
  .account-value-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .comparison-grid { grid-template-columns: 1fr; }
  .workflow-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workflow-steps li::after { display: none !important; }
  .account-final-cta { align-items: flex-start; flex-direction: column; }
  .account-final-actions { min-width: 0; }
}

@media (max-width: 680px) {
  .account-hero, .account-value-strip, .account-comparison, .account-features, .account-workflow, .account-security, .account-faq, .account-final-cta { width: min(100% - 28px, 100%); }
  .account-hero { min-height: 0; padding: 54px 0 66px; gap: 40px; }
  .account-hero h1 { font-size: clamp(39px, 12vw, 58px); }
  .account-hero-copy > p { font-size: 16px; }
  .account-hero-actions { display: grid; grid-template-columns: 1fr; }
  .account-hero-actions .button { width: 100%; }
  .account-trust-list { display: grid; justify-content: start; text-align: left; }
  .account-dashboard-preview { border-radius: 20px; }
  .preview-window-bar { border-radius: 19px 19px 0 0; }
  .preview-layout { min-height: auto; grid-template-columns: 42px minmax(0,1fr); border-radius: 0 0 19px 19px; }
  .preview-sidebar { gap: 10px; padding: 12px 0; }
  .preview-logo { width: 27px; height: 27px; }
  .preview-sidebar i { width: 23px; height: 23px; }
  .preview-main { padding: 14px; }
  .preview-head > span { display: none; }
  .preview-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .preview-metrics article:nth-child(3) { grid-column: 1 / -1; }
  .preview-metrics article { padding: 12px; }
  .preview-metrics strong { font-size: 23px; }
  .preview-panels { grid-template-columns: 1fr; }
  .preview-activity { display: none; }
  .account-value-strip { grid-template-columns: 1fr; margin-bottom: 60px; }
  .account-value-strip article { border-right: 0; border-bottom: 1px solid var(--line); }
  .account-value-strip article:last-child { border-bottom: 0; }
  .account-comparison, .account-features, .account-workflow, .account-faq { padding: 68px 0; }
  .account-section-head { margin-bottom: 28px; text-align: left; }
  .account-section-head h2 { font-size: 34px; }
  .comparison-card { padding: 24px; }
  .comparison-account::before { position: static; align-self: flex-start; margin-bottom: 12px; }
  .comparison-card > p { min-height: 0; }
  .account-feature-grid, .workflow-steps, .security-control-grid { grid-template-columns: 1fr; }
  .account-feature-grid article { min-height: 0; }
  .workflow-steps li { min-height: 0; }
  .account-security { margin-bottom: 68px; padding: 28px 22px; gap: 30px; }
  .account-security h2 { font-size: 34px; }
  .account-final-cta { margin-bottom: 68px; padding: 30px 22px; }
  .account-final-cta h2 { font-size: 34px; }
  .account-final-actions { display: grid; width: 100%; }
  .account-final-actions .button { width: 100%; }
}

:root[data-theme="light"] .preview-window-bar { background: #dce8f3; }
:root[data-theme="light"] .preview-layout { background: #f7fafc; }
:root[data-theme="light"] .preview-sidebar { background: #edf3f8; }
:root[data-theme="light"] .preview-main { background: #f8fbfd; }
:root[data-theme="light"] .preview-head strong,
:root[data-theme="light"] .preview-metrics strong,
:root[data-theme="light"] .preview-chart-panel strong,
:root[data-theme="light"] .preview-activity > strong { color: #102235; }
:root[data-theme="light"] .preview-metrics article,
:root[data-theme="light"] .preview-chart-panel,
:root[data-theme="light"] .preview-activity { background: #ffffff; border-color: rgba(23,51,78,.10); }
:root[data-theme="light"] .preview-activity b { color: #334e68; }

/* v7.9 — restrained conversion-page typography */
.account-hero h1 { font-size: clamp(42px, 4.6vw, 68px) !important; line-height: 1.02 !important; }
.account-hero-copy > p { font-size: clamp(16px, 1.25vw, 19px) !important; }
.account-section-head h2,
.account-security h2,
.account-final-cta h2 { font-size: clamp(29px, 3.2vw, 46px) !important; line-height: 1.08 !important; }
.account-section-head > p,
.account-security p,
.account-final-cta p { font-size: 15px !important; line-height: 1.68 !important; }
.account-feature-card h3,
.workflow-card h3,
.comparison-card h2 { font-size: 19px !important; }
.account-feature-card p,
.workflow-card p,
.comparison-card p { font-size: 14px !important; line-height: 1.62 !important; }
@media (max-width: 700px) {
  .account-hero h1 { font-size: clamp(36px, 10.5vw, 47px) !important; }
  .account-section-head h2,
  .account-security h2,
  .account-final-cta h2 { font-size: clamp(28px, 8vw, 37px) !important; }
}

/* Cyberocena v7.27 — denser account landing page */
.account-hero {
  min-height: 620px;
  padding-top: clamp(54px, 6vw, 76px);
  padding-bottom: clamp(60px, 6.5vw, 82px);
  gap: clamp(34px, 4.5vw, 64px);
}
.account-value-strip { margin-bottom: clamp(54px, 6vw, 76px); }
.account-comparison,
.account-features,
.account-workflow,
.account-faq { padding: clamp(54px, 6vw, 76px) 0; }
.account-security { margin-bottom: clamp(56px, 6vw, 78px); }
.account-final-cta { margin-bottom: clamp(56px, 6vw, 78px); }
.account-section-head { margin-bottom: clamp(22px, 3vw, 32px); }

@media (max-width: 680px) {
  .account-hero { padding: 38px 0 50px; gap: 28px; }
  .account-value-strip { margin-bottom: 42px; }
  .account-comparison,
  .account-features,
  .account-workflow,
  .account-faq { padding: 44px 0; }
  .account-security,
  .account-final-cta { margin-bottom: 46px; }
  .account-section-head h2,
  .account-security h2,
  .account-final-cta h2 { font-size: clamp(27px, 8vw, 34px) !important; }
}


/* =========================================================
   Cyberocena v7.38 — compact Konto i monitoring layout
   This stylesheet is loaded after app.css, therefore spacing fixes live here.
   ========================================================= */
.account-benefits-page .account-hero{
  min-height:0!important;
  padding:clamp(30px,3.4vw,46px) 0 clamp(36px,4vw,54px)!important;
  gap:clamp(26px,3.2vw,44px)!important;
}
.account-benefits-page .account-hero h1{margin:13px 0 15px!important}
.account-benefits-page .account-hero-copy>p{line-height:1.58!important}
.account-benefits-page .account-hero-actions{margin-top:22px!important}
.account-benefits-page .account-trust-list{margin-top:19px!important}
.account-benefits-page .account-dashboard-preview{box-shadow:0 25px 65px rgba(0,0,0,.28)}
.account-benefits-page .preview-layout{min-height:430px}
.account-benefits-page .account-value-strip{margin-bottom:clamp(30px,3.5vw,46px)!important}
.account-benefits-page .account-value-strip article{padding:18px 20px!important}
.account-benefits-page .account-comparison,
.account-benefits-page .account-features,
.account-benefits-page .account-workflow,
.account-benefits-page .account-faq{padding:clamp(34px,4vw,52px) 0!important}
.account-benefits-page .account-workflow{padding-bottom:clamp(38px,4.5vw,58px)!important}
.account-benefits-page .account-section-head{margin-bottom:clamp(18px,2.3vw,26px)!important}
.account-benefits-page .account-section-head h2{margin:7px 0 10px!important}
.account-benefits-page .comparison-grid,
.account-benefits-page .account-feature-grid,
.account-benefits-page .workflow-steps{gap:13px!important}
.account-benefits-page .comparison-card{padding:27px!important;border-radius:20px!important}
.account-benefits-page .comparison-card ul{margin:20px 0 24px!important;gap:10px!important}
.account-benefits-page .account-feature-grid article{min-height:235px!important;padding:20px!important}
.account-benefits-page .account-feature-grid h3{margin:16px 0 8px!important}
.account-benefits-page .workflow-steps li{min-height:175px!important;padding:21px!important}
.account-benefits-page .workflow-steps strong{margin-top:15px!important}
.account-benefits-page .account-security{margin-bottom:clamp(34px,4vw,52px)!important;padding:clamp(28px,3.5vw,42px)!important;gap:clamp(25px,3.4vw,40px)!important;border-radius:23px!important}
.account-benefits-page .account-security h2{margin:7px 0 10px!important}
.account-benefits-page .account-security p{margin-bottom:18px!important}
.account-benefits-page .security-control-grid article{min-height:110px!important;padding:16px!important}
.account-benefits-page .account-faq .faq-list{gap:8px!important}
.account-benefits-page .faq-list summary{min-height:56px!important}
.account-benefits-page .account-final-cta{margin-bottom:clamp(38px,4vw,54px)!important;padding:clamp(28px,3.5vw,42px)!important;gap:26px!important;border-radius:23px!important}
.account-benefits-page .account-final-cta h2{margin:7px 0 9px!important}
@media(max-width:1180px){
  .account-benefits-page .account-hero{padding-top:32px!important}
  .account-benefits-page .preview-layout{min-height:400px}
}
@media(max-width:680px){
  .account-benefits-page .account-hero{padding:23px 0 32px!important;gap:22px!important}
  .account-benefits-page .account-hero-actions{margin-top:18px!important}
  .account-benefits-page .account-trust-list{margin-top:16px!important;gap:8px!important}
  .account-benefits-page .preview-layout{min-height:auto}
  .account-benefits-page .account-value-strip{margin-bottom:25px!important}
  .account-benefits-page .account-comparison,
  .account-benefits-page .account-features,
  .account-benefits-page .account-workflow,
  .account-benefits-page .account-faq{padding:29px 0!important}
  .account-benefits-page .account-security,
  .account-benefits-page .account-final-cta{margin-bottom:32px!important;padding:22px 18px!important}
  .account-benefits-page .account-section-head{margin-bottom:18px!important}
  .account-benefits-page .comparison-card,
  .account-benefits-page .account-feature-grid article,
  .account-benefits-page .workflow-steps li{padding:18px!important}
}


/* v7.38 final rhythm guard — neutralize the global section margins */
.account-benefits-page .account-hero{margin:0 auto!important}
.account-benefits-page .account-value-strip{margin:0 auto clamp(30px,3.5vw,46px)!important}
.account-benefits-page .account-comparison,
.account-benefits-page .account-features,
.account-benefits-page .account-workflow,
.account-benefits-page .account-faq{margin:0 auto!important}
.account-benefits-page .account-security{margin:0 auto clamp(34px,4vw,52px)!important}
.account-benefits-page .account-final-cta{margin:0 auto clamp(38px,4vw,54px)!important}
@media(max-width:680px){
  .account-benefits-page .account-value-strip{margin:0 auto 25px!important}
  .account-benefits-page .account-security,
  .account-benefits-page .account-final-cta{margin:0 auto 32px!important}
}


/* Cyberocena v7.40 — centered enterprise feature introduction */
.account-benefits-page .account-section-head-centered {
  max-width: 930px;
  margin-inline: auto !important;
  text-align: center !important;
}
.account-benefits-page .account-section-head-centered > p {
  margin-inline: auto !important;
}
@media (max-width: 680px) {
  .account-benefits-page .account-section-head-centered {
    text-align: center !important;
  }
}

/* Cyberocena v7.45 — account change monitoring */
.account-change-monitoring {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
    gap: clamp(28px, 5vw, 66px);
    align-items: center;
    margin: 0 !important;
    padding: clamp(34px, 5vw, 64px) 0 !important;
}
.account-change-copy h2 { max-width: 850px; margin: 10px 0 14px; font-size: clamp(30px, 3.5vw, 49px); line-height: 1.06; letter-spacing: -.035em; }
.account-change-copy > p { max-width: 780px; color: var(--muted); line-height: 1.75; }
.account-change-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 22px; }
.account-change-features article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px solid rgba(132, 169, 222, .15); border-radius: 16px; background: rgba(14, 29, 48, .62); }
.account-change-features article > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #86b3ff; background: rgba(48, 112, 245, .13); font-weight: 900; }
.account-change-features strong, .account-change-features small { display: block; }
.account-change-features strong { font-size: 14px; }
.account-change-features small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.account-change-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 22px; }
.account-change-actions > span { color: var(--muted); font-size: 12px; }
.account-alert-engine { padding: 22px; border: 1px solid rgba(118, 157, 222, .2); border-radius: 24px; background: radial-gradient(circle at 100% 0, rgba(255, 79, 104, .12), transparent 38%), rgba(8, 19, 34, .88); box-shadow: 0 24px 70px rgba(0,0,0,.24); }
.account-alert-engine > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.account-alert-engine > header span { color: #91a8c1; font-size: 10px; letter-spacing: .1em; font-weight: 900; }
.account-alert-engine > header b { padding: 6px 9px; border-radius: 999px; color: #ff919d; background: rgba(255,75,96,.12); font-size: 10px; }
.account-alert-engine h3 { margin: 20px 0 9px; font-size: 22px; }
.account-alert-engine > p { color: var(--muted); line-height: 1.65; }
.account-alert-engine dl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 19px 0; }
.account-alert-engine dl div { padding: 12px; border-radius: 13px; background: rgba(31, 51, 76, .57); }
.account-alert-engine dt { color: #869db5; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.account-alert-engine dd { margin: 4px 0 0; font-weight: 800; }
.account-alert-engine footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid rgba(137, 166, 209, .13); color: #8399b1; font-size: 11px; }
.account-alert-engine footer i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #52dda7; }
[data-theme="light"] .account-change-features article, [data-theme="light"] .account-alert-engine { background: #f8fbff; border-color: rgba(41,83,145,.14); box-shadow: 0 20px 48px rgba(38,71,112,.09); }
[data-theme="light"] .account-alert-engine dl div { background: #eef4fc; }
@media (max-width: 960px) { .account-change-monitoring { grid-template-columns: 1fr; } .account-alert-engine { max-width: 680px; } }
@media (max-width: 620px) {
    .account-change-monitoring { padding: 28px 0 !important; }
    .account-change-copy h2 { font-size: clamp(28px, 9vw, 36px); }
    .account-change-features { grid-template-columns: 1fr; }
    .account-change-actions, .account-change-actions .button { width: 100%; }
    .account-change-actions .button { justify-content: center; }
    .account-alert-engine { padding: 18px; border-radius: 20px; }
    .account-alert-engine dl { grid-template-columns: 1fr; }
    .account-alert-engine footer { flex-direction: column; }
}


/* Cyberocena v7.46 — safe typography for Konto i monitoring.
   This file loads after app.css, so the final landing-page overrides live here. */
.public-site-page.account-benefits-page .account-hero h1 {
  max-width: 710px !important;
  font-size: clamp(32px, 3.25vw, 48px) !important;
  line-height: 1.13 !important;
  letter-spacing: -.026em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
  text-wrap: pretty;
}
.public-site-page.account-benefits-page .account-hero h1 em { line-height: inherit !important; }
.public-site-page.account-benefits-page .account-section-head h2,
.public-site-page.account-benefits-page .account-security h2,
.public-site-page.account-benefits-page .account-final-cta h2,
.public-site-page.account-benefits-page .account-change-copy h2 {
  font-size: clamp(25px, 2.55vw, 38px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.018em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
  text-wrap: pretty;
}
.public-site-page.account-benefits-page .comparison-card h3,
.public-site-page.account-benefits-page .account-feature-grid h3,
.public-site-page.account-benefits-page .account-alert-engine h3 {
  line-height: 1.22 !important;
  letter-spacing: -.01em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
}
@media (max-width: 680px) {
  .public-site-page.account-benefits-page .account-hero h1 {
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.018em !important;
  }
  .public-site-page.account-benefits-page .account-section-head h2,
  .public-site-page.account-benefits-page .account-security h2,
  .public-site-page.account-benefits-page .account-final-cta h2,
  .public-site-page.account-benefits-page .account-change-copy h2 {
    font-size: clamp(22px, 6.5vw, 29px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.012em !important;
  }
}
@media (max-width: 390px) {
  .public-site-page.account-benefits-page .account-hero h1 { font-size: 28px !important; }
  .public-site-page.account-benefits-page .account-section-head h2,
  .public-site-page.account-benefits-page .account-security h2,
  .public-site-page.account-benefits-page .account-final-cta h2,
  .public-site-page.account-benefits-page .account-change-copy h2 { font-size: 22px !important; }
}

/* =========================================================
   Cyberocena v7.52 - remediation feature on account page
   ========================================================= */
.account-remediation{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);gap:34px;align-items:center;margin:0 0 54px;padding:34px;border:1px solid rgba(71,145,240,.22);border-radius:22px;background:linear-gradient(135deg,rgba(14,48,91,.94),rgba(6,27,52,.98))}.account-remediation-copy h2{max-width:780px;margin:8px 0 12px;font-size:clamp(27px,3vw,40px);line-height:1.16;letter-spacing:-.024em}.account-remediation-copy>p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}.account-remediation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.account-remediation-list span{min-width:0;padding:13px;border:1px solid rgba(89,155,238,.17);border-radius:12px;background:rgba(255,255,255,.025)}.account-remediation-list b,.account-remediation-list small{display:block}.account-remediation-list b{color:#e9f4ff;font-size:12px}.account-remediation-list small{margin-top:5px;color:#8ea7c5;font-size:10px;line-height:1.5}.account-remediation-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}.account-remediation-actions>span{color:#819bbb;font-size:10px}.account-remediation-preview{min-width:0;border:1px solid rgba(92,159,242,.23);border-radius:16px;background:#020d1f;overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.2)}.account-remediation-preview header,.account-remediation-preview footer{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;background:#071a34}.account-remediation-preview header{border-bottom:1px solid rgba(92,159,242,.16)}.account-remediation-preview header span{color:#6caeff;font-size:9px;font-weight:900;letter-spacing:.12em}.account-remediation-preview header b{padding:4px 7px;border-radius:6px;background:rgba(54,129,242,.17);color:#95c6ff;font-size:8px}.account-remediation-preview pre{margin:0;padding:22px;overflow:auto;color:#6fe4cf;font:11px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.account-remediation-preview footer{border-top:1px solid rgba(92,159,242,.14);justify-content:flex-start;flex-wrap:wrap}.account-remediation-preview footer span{padding:5px 8px;border:1px solid rgba(88,151,233,.2);border-radius:7px;color:#8fb7e4;font-size:8px}:root[data-theme="light"] .account-remediation{background:linear-gradient(135deg,#fff,#f2f8fd);box-shadow:0 18px 42px rgba(39,72,105,.09)}:root[data-theme="light"] .account-remediation-copy h2{color:#173754}:root[data-theme="light"] .account-remediation-list span{background:#fff}:root[data-theme="light"] .account-remediation-list b{color:#173754}
@media(max-width:980px){.account-remediation{grid-template-columns:1fr}.account-remediation-preview{max-width:720px}}
@media(max-width:680px){.account-remediation{padding:22px 17px;border-radius:18px}.account-remediation-copy h2{font-size:clamp(22px,6.8vw,29px)}.account-remediation-list{grid-template-columns:1fr}.account-remediation-actions{align-items:flex-start;flex-direction:column}.account-remediation-actions a{width:100%}.account-remediation-preview pre{padding:17px;font-size:10px}}

/* =========================================================
   Cyberocena v7.59 — modern Konto i monitoring landing page
   ========================================================= */
.account-benefits-page {
  --account-shell: min(1400px, calc(100% - 48px));
  --account-gap: clamp(34px, 4vw, 58px);
}
.account-benefits-page main { overflow: visible; }
.account-benefits-page .account-hero.account-hero-v759 {
  width: var(--account-shell) !important;
  max-width: 1400px !important;
  min-height: 650px !important;
  padding: 58px 0 42px !important;
  grid-template-columns: minmax(0,.92fr) minmax(560px,1.08fr) !important;
  gap: clamp(44px,5vw,74px) !important;
  align-items:center !important;
}
.account-benefits-page .account-hero-copy { min-width:0; }
.account-benefits-page .account-hero h1 {
  max-width:720px !important;
  margin:16px 0 18px !important;
  font-size:clamp(46px,4.2vw,66px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}
.account-benefits-page .account-hero h1 em { margin-top:6px !important; }
.account-benefits-page .account-hero-copy > p {
  max-width:670px !important;
  font-size:17px !important;
  line-height:1.67 !important;
}
.account-benefits-page .account-hero-highlights {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}
.account-benefits-page .account-hero-highlights > span {
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  align-items:center;
  min-height:58px;
  padding:10px 11px;
  border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
}
.account-benefits-page .account-hero-highlights b {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,var(--surface-2));
  font-size:9px;
}
.account-benefits-page .account-hero-highlights small {
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}
.account-benefits-page .account-hero-actions { margin-top:24px !important; }
.account-benefits-page .account-trust-list { margin-top:22px !important; }
.account-benefits-page .account-dashboard-preview {
  transform:none !important;
  border-radius:24px !important;
  box-shadow:0 34px 90px rgba(0,0,0,.28) !important;
}
.account-benefits-page .preview-layout { min-height:440px !important; }
.account-benefits-page .preview-main { padding:22px !important; }

.account-benefits-page .account-page-nav {
  width:var(--account-shell);
  max-width:1400px;
  margin:0 auto 20px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.account-benefits-page .account-page-nav a {
  min-width:0;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  color:var(--text);
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  transition:.2s ease;
}
.account-benefits-page .account-page-nav a:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--primary) 35%,var(--line));
}
.account-benefits-page .account-page-nav span {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  border-radius:9px;
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,var(--surface-2));
  font-size:9px;
}

.account-benefits-page .account-value-strip,
.account-benefits-page .account-comparison,
.account-benefits-page .account-change-monitoring,
.account-benefits-page .account-features,
.account-benefits-page .account-remediation,
.account-benefits-page .account-workflow,
.account-benefits-page .account-security,
.account-benefits-page .account-faq,
.account-benefits-page .account-final-cta {
  width:var(--account-shell) !important;
  max-width:1400px !important;
}
.account-benefits-page .account-value-strip {
  margin:0 auto var(--account-gap) !important;
  border-radius:18px !important;
}
.account-benefits-page .account-value-strip article {
  min-height:82px;
  padding:18px 20px !important;
}
.account-benefits-page .account-comparison,
.account-benefits-page .account-features,
.account-benefits-page .account-workflow,
.account-benefits-page .account-faq {
  margin:0 auto var(--account-gap) !important;
  padding:clamp(34px,4vw,52px) !important;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--blue) 8%,transparent),transparent 28%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-2) 78%,var(--surface)));
}
.account-benefits-page .account-section-head {
  max-width:960px !important;
  margin-bottom:30px !important;
}
.account-benefits-page .account-section-head h2 {
  font-size:clamp(31px,3.2vw,46px) !important;
  line-height:1.12 !important;
}
.account-benefits-page .comparison-grid { gap:16px !important; }
.account-benefits-page .comparison-card {
  min-height:100%;
  padding:28px !important;
  border-radius:20px !important;
}
.account-benefits-page .comparison-card h3 { font-size:27px !important; }

.account-benefits-page .account-change-monitoring,
.account-benefits-page .account-remediation,
.account-benefits-page .account-security {
  margin:0 auto var(--account-gap) !important;
  padding:clamp(32px,4vw,48px) !important;
  border-radius:26px !important;
  gap:clamp(32px,4vw,54px) !important;
}
.account-benefits-page .account-change-monitoring,
.account-benefits-page .account-remediation {
  grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr) !important;
}
.account-benefits-page .account-feature-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
}
.account-benefits-page .account-feature-grid article {
  min-height:230px !important;
  padding:22px !important;
  border-radius:18px !important;
}
.account-benefits-page .workflow-steps { gap:13px !important; }
.account-benefits-page .workflow-steps li {
  min-height:185px !important;
  padding:22px !important;
}
.account-benefits-page .account-security { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important; }
.account-benefits-page .account-faq .faq-list { max-width:1000px !important; }
.account-benefits-page .account-final-cta {
  margin:0 auto 68px !important;
  padding:42px !important;
  border-radius:26px !important;
}

@media (max-width:1180px) {
  .account-benefits-page .account-hero.account-hero-v759 {
    grid-template-columns:1fr !important;
    min-height:0 !important;
    padding-top:44px !important;
  }
  .account-benefits-page .account-hero-copy {
    max-width:940px !important;
    margin-inline:auto !important;
    text-align:center !important;
  }
  .account-benefits-page .account-hero-copy > p,
  .account-benefits-page .account-hero h1,
  .account-benefits-page .account-hero-highlights { margin-inline:auto !important; }
  .account-benefits-page .account-hero-actions,
  .account-benefits-page .account-trust-list { justify-content:center !important; }
  .account-benefits-page .account-dashboard-preview { width:min(920px,100%) !important; margin-inline:auto !important; }
  .account-benefits-page .account-change-monitoring,
  .account-benefits-page .account-remediation,
  .account-benefits-page .account-security { grid-template-columns:1fr !important; }
  .account-benefits-page .account-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:900px) {
  .account-benefits-page { --account-shell:min(100% - 32px,1400px); }
  .account-benefits-page .account-page-nav {
    display:flex;
    overflow-x:auto;
    padding-bottom:3px;
  }
  .account-benefits-page .account-page-nav a { flex:0 0 190px; }
  .account-benefits-page .account-hero-highlights { grid-template-columns:1fr; max-width:620px; }
  .account-benefits-page .account-comparison,
  .account-benefits-page .account-features,
  .account-benefits-page .account-workflow,
  .account-benefits-page .account-faq { padding:28px !important; }
}
@media (max-width:680px) {
  .account-benefits-page { --account-shell:calc(100% - 24px); --account-gap:24px; }
  .account-benefits-page .account-hero.account-hero-v759 { width:var(--account-shell) !important; padding:34px 0 24px !important; gap:28px !important; }
  .account-benefits-page .account-hero-copy { text-align:left !important; }
  .account-benefits-page .account-hero h1 { font-size:clamp(36px,11vw,48px) !important; }
  .account-benefits-page .account-hero-copy > p { font-size:15px !important; }
  .account-benefits-page .account-hero-actions,
  .account-benefits-page .account-trust-list { justify-content:flex-start !important; }
  .account-benefits-page .account-page-nav { width:calc(100% - 24px); margin-bottom:16px; }
  .account-benefits-page .account-value-strip { grid-template-columns:1fr !important; }
  .account-benefits-page .account-value-strip article { border-right:0 !important; border-bottom:1px solid var(--line); }
  .account-benefits-page .account-value-strip article:last-child { border-bottom:0; }
  .account-benefits-page .account-comparison,
  .account-benefits-page .account-features,
  .account-benefits-page .account-workflow,
  .account-benefits-page .account-faq,
  .account-benefits-page .account-change-monitoring,
  .account-benefits-page .account-remediation,
  .account-benefits-page .account-security,
  .account-benefits-page .account-final-cta { padding:22px !important; border-radius:19px !important; }
  .account-benefits-page .account-feature-grid,
  .account-benefits-page .workflow-steps,
  .account-benefits-page .security-control-grid { grid-template-columns:1fr !important; }
  .account-benefits-page .account-feature-grid article { min-height:0 !important; }
  .account-benefits-page .account-final-cta { align-items:flex-start !important; }
}
