/* ==========================================================================
   Sara AI Pentest Trial
   Scoped under .saratrial with st- prefixed classes to avoid theme collisions.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&display=swap');

.saratrial{
  --st-navy:#071827;
  --st-navy-2:#0d2b47;
  --st-blue:#1e63f0;          /* hero CTA blue */
  --st-blue-2:#2f63e6;        /* body link blue */
  --st-blue-600:#0156d6;      /* hover */
  --st-blue-light:#E6F0FF;
  --st-green:#67ddac;         /* hero headline / accents */
  --st-green-2:#8be7c1;       /* eyebrow */
  --st-ink:#0b1f33;
  --st-slate:#34465c;
  --st-slate-2:#5d6b7d;
  --st-line:#e1e7f0;
  --st-line-2:#e5eaf1;
  --st-bg:#f4f7fb;
  --st-card:#f7f9fc;
  --st-white:#fff;
  --st-radius:20px;
  --st-radius-sm:16px;
  --st-shadow:0 24px 48px rgba(7,24,39,.28);
  --st-shadow-sm:0 8px 20px rgba(7,24,39,.05);
  --st-font:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--st-font);
  color:var(--st-ink);
  line-height:1.55;
  background:var(--st-bg);
  -webkit-font-smoothing:antialiased;
}

.saratrial *{box-sizing:border-box}
.saratrial h1,.saratrial h2,.saratrial h3{line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:0}
.saratrial p{margin:0}
.saratrial a{text-decoration:none;color:inherit}
.saratrial ul,.saratrial ol{margin:0;padding-left:22px}

.st-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.st-section{padding:30px 0}

.st-eyebrow{font-size:13px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--st-blue-2)!important}
.st-eyebrow.on-dark{color:var(--st-blue-2)}
.st-eyebrow.on-blue{display:inline-block;border-radius:30px}

/* ---------- buttons ---------- */
.st-btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;letter-spacing:.5px;text-transform:uppercase;border-radius:999px;padding:15px 34px;cursor:pointer;border:0;transition:.18s ease}
/* Beat .saratrial a{color:inherit} so button text stays white on the blue fill */
.saratrial a.st-btn-primary,
.saratrial a.st-btn-primary:hover,
.saratrial a.st-btn-primary:visited{color:#fff}
.st-btn-primary{background:var(--st-blue)}
.st-btn-primary:hover{background:var(--st-blue-600);transform:translateY(-1px)}

/* ---------- HERO ---------- */
.st-hero{position:relative;background:linear-gradient(135deg,var(--st-navy) 0%,var(--st-navy-2) 55%,#10386b 100%);color:#fff;overflow:hidden}
.st-hero-grid{position:relative;display:grid;grid-template-columns:1fr 600px;gap:40px;padding:196px 0 84px;align-items:center}
.st-hero-copy .st-eyebrow{margin-bottom:22px}
.st-hero h1{font-size:56px;margin:0 0 22px;color:#fff;letter-spacing:-2px;line-height:1.03;max-width:14ch}
.st-lede{font-size:22px;color:#e8eef7;max-width:520px;font-weight:500;line-height:1.45;margin-bottom:32px}
/* CTA on its own line so the margin below actually separates it from reassure */
.st-hero-copy .st-btn{display:inline-flex}
.st-hero-cta-row{margin:26px 0 26px}
.st-cta-box .st-hero-cta-row,
.st-card-white .st-hero-cta-row{margin:20px 0 0}
.st-reassure{font-size:13px;color:#c9d6e8;font-weight:600;margin:0 0 28px}

.st-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:480px;margin-top:10px;}
.st-trust-card{display:flex;align-items:center;justify-content:center;min-height:68px;padding:9px 10px;background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.st-trust-card span{font-size:12.5px;line-height:1.2;color:#101828;font-weight:800;text-align:center}
.st-trust-card.g2{border-left:4px solid #ff6b3d}
.st-trust-card.gartner{border-left:4px solid #38f5d3}
.st-trust-card.fedramp{border-left:4px solid var(--st-blue)}

/* ---------- FORM CARD ---------- */
.st-form-card{background:#fff;border-radius:18px;box-shadow:var(--st-shadow);padding:28px 26px;color:var(--st-ink);position:relative}
.st-fc-top{text-align:center;margin-bottom:6px}
.st-form-card h3{font-size:22px;color:var(--st-navy)}
.st-sub{font-size:14px;color:var(--st-slate-2);text-align:center;margin:4px 0 22px}

/* HubSpot embed normalization - native markup preserved for tracking */
.st-hsform label{display:block;font-size:12px;font-weight:600;color:var(--st-slate);margin-bottom:4px}
.st-hsform input[type=text],
.st-hsform input[type=email],
.st-hsform input[type=tel],
.st-hsform select,
.st-hsform textarea{width:100%;height:42px!important;font-family:inherit;font-size:14px;color:var(--st-ink);background:#fff;border:1px solid #d5dde8;border-radius:8px;padding:0 14px;transition:.15s}
.st-hsform textarea{height:auto!important;min-height:60px;padding:10px 14px}
.st-hsform input:focus,
.st-hsform select:focus,
.st-hsform textarea:focus{outline:0;border-color:var(--st-blue-2);background:#fff;box-shadow:0 0 0 3px rgba(47,99,230,.12)}

.st-hsform form{padding:0!important}
.st-hsform fieldset{padding:0!important}
.st-hsform .hs-form-field{margin-bottom:12px}
.st-hsform .hs-form-field,
.st-hsform .hs-form-field>.input,
.st-hsform fieldset.form-columns-1,
.st-hsform fieldset.form-columns-2{max-width:100%!important;width:100%!important;margin-left:0!important;margin-right:0!important}
.st-hsform .hs-form-field>.input{width:100%!important;margin:0!important}
.st-hsform .hs-input{width:100%!important}

.st-hsform fieldset.form-columns-2{display:flex!important;gap:8px}
.st-hsform fieldset.form-columns-2 .hs-form-field{width:50%!important;flex:1}
.st-hsform fieldset.form-columns-2 .hs-form-field>.input{width:100%!important}

.st-hsform ul.inputs-list{list-style:none;margin:0;padding:0}
.st-hsform ul.inputs-list li{list-style:none;padding:0}

/* Consent checkbox stays inline with its label */
.st-hsform .hs-form-booleancheckbox-display{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.5;color:var(--st-slate-2)}
.st-hsform .hs-form-booleancheckbox-display input{width:auto!important;height:auto!important;margin-top:2px}
.st-hsform .hs-form-booleancheckbox-display a{color:var(--st-blue-2);font-weight:700}

.st-hsform input[type=checkbox]{
  width:auto!important;
  height:auto!important;
  min-width:16px;
  min-height:16px;
  margin:2px 8px 0 0;
  padding:0;
  border:1px solid #d5dde8;
  border-radius:4px;
  -webkit-appearance:checkbox!important;
  -moz-appearance:checkbox!important;
  appearance:checkbox!important;
  accent-color:var(--st-blue);
}

.st-hsform select{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2334465c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")!important;
  background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:32px!important;
}

/* Submit button (pill) */
.st-hsform .hs-button{width:100%;justify-content:center;margin-top:6px;font-size:14px;padding:14px;background:var(--st-blue);color:#fff;font-weight:800;border:0;border-radius:999px;cursor:pointer;transition:.18s ease;text-transform:uppercase;letter-spacing:.5px}
.st-hsform .hs-button:hover{background:var(--st-blue-600)}

/* Validation / error text */
.st-hsform .hs-error-msg,
.st-hsform .hs-error-msgs label{color:#C24A4A;font-size:12px;font-weight:500}

/* ---------- SHARED BODY TYPE ---------- */
.st-body{font-size:15px;line-height:1.65;letter-spacing:.045em;color:var(--st-slate);margin-bottom:18px}
.saratrial .st-section strong{color:#26384f;font-weight:800}
.st-link{color:var(--st-blue-2);font-weight:800}
.st-link:hover{color:var(--st-blue-600)}

.st-list{margin-top:4px}
.st-list li{font-size:14px;line-height:1.6;letter-spacing:.045em;color:var(--st-slate);padding-left:8px;margin-bottom:12px}
.st-list li:last-child{margin-bottom:0}

/* ---------- PROBLEM ---------- */
.st-problem h2{font-size:28px;color:var(--st-navy);margin-bottom:22px}
.st-chips{display:flex;flex-wrap:nowrap;gap:10px;margin-top:30px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.st-chip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;white-space:nowrap;border-radius:999px;border:1px solid var(--st-line);background:var(--st-card);color:var(--st-navy);font-size:12px;letter-spacing:.04em;font-weight:800}
.st-chip:hover{border-color:var(--st-blue-2);color:var(--st-blue-2)}

/* ---------- CARDS ---------- */
.st-card-dark{background:#EDF5FF;border-radius:var(--st-radius);padding:42px 50px;border: 1px solid var(--st-line);}
.st-quote{font-size:16px;line-height:1.55;letter-spacing:.045em;color:#222222;font-weight:800;margin:18px 0 24px;border:0}
.st-quote-attr{font-size:13px;line-height:1.55;color:var(--st-blue-2);font-weight:800}

.st-card-light{background:var(--st-card);border-radius:var(--st-radius);border:1px solid var(--st-line);padding:42px 50px;box-shadow:var(--st-shadow-sm)}
.st-card-white{background:#fff;border-radius:var(--st-radius);border:1px solid var(--st-line);padding:42px 50px;box-shadow:var(--st-shadow-sm)}
.st-card-assurance{background:#fff;border-radius:var(--st-radius);border:1px solid #c9dbff;padding:42px 50px;box-shadow:var(--st-shadow-sm)}
.st-card-light h3,.st-card-white h3,.st-card-assurance h3{font-size:22px;color:var(--st-navy);margin-bottom:18px}
.st-card-assurance .st-eyebrow{margin-bottom:18px;display:block}

/* ---------- CTA BOX ---------- */
.st-cta-box{border-radius:var(--st-radius);border:1px solid #c9dbff;padding:42px 50px;background:#f1f6ff}
.st-cta-box h3{font-size:22px;color:var(--st-navy);margin-bottom:18px}
.st-cta-note{font-size:12px;line-height:1.55;color:var(--st-slate-2);margin:0 0 28px}

/* ---------- RESOURCES ---------- */
.st-res-head{font-size:18px;line-height:1.5;color:var(--st-slate);font-weight:800;margin-bottom:18px}
.st-res-cta{margin:28px 0 24px}
.st-res-links a{display:inline-block;color:var(--st-blue-2);font-size:14px;line-height:1.45;letter-spacing:.045em;font-weight:800;margin:0 22px 12px 0}
.st-res-links a:hover{color:var(--st-blue-600)}

/* ---------- FAQ ---------- */
.st-sec-head{max-width:760px}
.st-sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.st-sec-head h2{font-size:28px;color:var(--st-navy);margin:8px 0 0}
.st-faq-wrap{margin-top:36px}
.st-faq-wrap details{background:#fff;border:1px solid var(--st-line-2);border-radius:var(--st-radius-sm);margin-bottom:16px;overflow:hidden}
.st-faq-wrap summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;color:var(--st-navy);padding:18px 26px}
.st-faq-wrap summary::-webkit-details-marker{display:none}
.st-faq-wrap summary .pm{color:var(--st-blue-2);font-size:22px;font-weight:600;transition:.2s}
.st-faq-wrap details[open] summary .pm{transform:rotate(45deg)}
.st-faq-wrap details p{margin:0;padding:0 26px 22px;font-size:13px;line-height:1.6;letter-spacing:.04em;color:var(--st-slate)}

/* ---------- TERMS ---------- */
.st-terms-sec{padding:0 0 56px}
.st-terms{font-size:11px;line-height:1.7;letter-spacing:.03em;color:#8a8f98}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .st-hero-grid{grid-template-columns:1fr;gap:36px;padding:196px 20px 60px}
  .st-hero h1{font-size:40px;letter-spacing:-1px}
  /* Mobile: form card drops below hero copy (headline + paragraph + CTA) */
  .st-form-card{order:2}
  .st-section{padding:20px 0}
  .st-problem h2,.st-sec-head h2{font-size:26px}
  .st-card-dark,.st-card-light,.st-card-white,.st-card-assurance,.st-cta-box{padding:32px 26px}
}
@media(max-width:600px){
  .st-hero h1{font-size:34px}
  .st-lede{font-size:19px}
  .st-trust{grid-template-columns:1fr}
  .st-res-links a{margin-right:0;display:block}
}

/* Anchor target highlight for the trial form */
#st-form {
  scroll-margin-top: 120px; /* adjust to sticky header height */
}

#st-form.is-highlighted {
  outline: 2px solid #016BFF;
  outline-offset: 10px;
  border-radius: 10px;
  animation: st-form-pulse 1.6s ease-out 2;
}

@keyframes st-form-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(1, 107, 255, .45); }
  100% { box-shadow: 0 0 0 18px rgba(1, 107, 255, 0); }
}