/* ==========================================================================
   Inscited: Citation Signal design system
   Tokens mirror the active Novamira design. Do not introduce values here that
   the design does not declare.
   ========================================================================== */

:root{
  --ins-bg:#F4F6F9;
  --ins-surface:#FFFFFF;
  --ins-ink:#0A0F1A;
  --ins-muted:#57617A;
  --ins-accent:#1F4FE0;
  --ins-accent-hover:#1740BE;
  --ins-accent-soft:#E8EDFF;
  --ins-deep:#070B14;
  --ins-line:#DDE3EC;

  --ins-xs:8px; --ins-sm:16px; --ins-md:32px; --ins-lg:64px; --ins-xl:112px;
  --ins-r-sm:6px; --ins-r-md:14px; --ins-r-lg:24px; --ins-r-pill:999px;

  --ins-font-head:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ins-font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ins-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ins-shadow:0 1px 2px rgba(10,15,26,.04), 0 12px 32px -12px rgba(31,79,224,.16);
  --ins-ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- base ---- */

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body,
.ast-container,
.entry-content{
  font-family:var(--ins-font-body);
  color:var(--ins-ink);
  background:var(--ins-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{font-size:17px;line-height:1.65;letter-spacing:0}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.elementor-image-box-title,
.elementor-icon-box-title{
  font-family:var(--ins-font-head);
  font-weight:800;
  color:var(--ins-ink);
  letter-spacing:-0.02em;
}

h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.5rem,5.2vw,4.1rem);line-height:1.03;letter-spacing:-0.035em}
h2,.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(2rem,3.6vw,3rem);line-height:1.07;letter-spacing:-0.03em}
h3,.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.12;letter-spacing:-0.02em}
h4{font-size:1.15rem;line-height:1.2}

p{color:var(--ins-muted);margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--ins-accent);text-underline-offset:3px}
a:hover,a:focus{color:var(--ins-accent-hover)}

/* Measure: keep running text readable. */
.ins-measure p,
.ins-measure .elementor-widget-text-editor{max-width:64ch}

/* Visible focus for keyboard users everywhere. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,
.elementor-button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--ins-accent);
  outline-offset:3px;
  border-radius:var(--ins-r-sm);
}

/* ------------------------------------------------------------ buttons ---- */

.elementor-button,
.ins-btn,
button,
input[type="submit"],
.wp-block-button__link{
  font-family:var(--ins-font-body);
  font-weight:600;
  font-size:1rem;
  letter-spacing:0;
  border-radius:var(--ins-r-pill);
  padding:15px 30px;
  line-height:1.2;
  border:1px solid transparent;
  transition:transform .18s var(--ins-ease), background-color .18s var(--ins-ease), box-shadow .18s var(--ins-ease);
  white-space:nowrap;
}

.ins-btn-primary .elementor-button,
.elementor-button.ins-btn-primary,
.ins-btn-primary{
  background:var(--ins-accent);
  color:#FFFFFF;
  box-shadow:0 10px 24px -12px rgba(31,79,224,.55);
}
.ins-btn-primary .elementor-button:hover,
.elementor-button.ins-btn-primary:hover,
.ins-btn-primary:hover{background:var(--ins-accent-hover);color:#FFFFFF;transform:translateY(-1px)}
.ins-btn-primary .elementor-button:active,
.ins-btn-primary:active{transform:translateY(1px)}

.ins-btn-secondary .elementor-button,
.elementor-button.ins-btn-secondary,
.ins-btn-secondary{
  background:var(--ins-surface);
  color:var(--ins-ink);
  border-color:var(--ins-line);
  box-shadow:none;
}
.ins-btn-secondary .elementor-button:hover,
.ins-btn-secondary:hover{background:var(--ins-bg);color:var(--ins-ink);border-color:#C6CEDC;transform:translateY(-1px)}

/* Secondary button sitting on the deep ground. */
.ins-deep .ins-btn-secondary .elementor-button,
.ins-deep .ins-btn-secondary{
  background:transparent;
  color:#FFFFFF;
  border-color:rgba(255,255,255,.28);
}
.ins-deep .ins-btn-secondary .elementor-button:hover{background:rgba(255,255,255,.08);color:#FFFFFF}

/* ----------------------------------------------------------- sections ---- */

.ins-section{padding-block:var(--ins-xl)}
.ins-section-tight{padding-block:var(--ins-lg)}

.ins-deep{background:var(--ins-deep);color:#FFFFFF}
.ins-deep h1,.ins-deep h2,.ins-deep h3,.ins-deep h4,
.ins-deep .elementor-heading-title{color:#FFFFFF}
.ins-deep p,.ins-deep .elementor-widget-text-editor{color:#A9B4C7}

.ins-ground{background:var(--ins-bg)}
.ins-surface{background:var(--ins-surface)}

/* Hairline top rule to separate without a card. */
.ins-rule{border-top:1px solid var(--ins-line)}
.ins-deep .ins-rule{border-top-color:rgba(255,255,255,.12)}

/* ------------------------------------------------------------- eyebrow --- */

.ins-eyebrow,
.ins-eyebrow .elementor-heading-title{
  font-family:var(--ins-font-body);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ins-accent);
}
.ins-deep .ins-eyebrow,
.ins-deep .ins-eyebrow .elementor-heading-title{color:#8FA9FF}

/* ------------------------------------------------- citation highlight ---- */

.ins-cite{
  background:var(--ins-accent-soft);
  color:var(--ins-accent);
  border-radius:var(--ins-r-sm);
  padding:.08em .34em;
  font-weight:600;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.ins-deep .ins-cite{background:rgba(31,79,224,.26);color:#B9CBFF}

/* --------------------------------------------------- answer-engine panel -- */

.ins-panel{
  font-family:var(--ins-font-mono);
  font-size:15px;
  line-height:1.7;
  border-radius:var(--ins-r-md);
  padding:22px 24px;
  background:var(--ins-surface);
  border:1px solid var(--ins-line);
  color:var(--ins-ink);
}
.ins-panel p{color:inherit;font-family:inherit;font-size:inherit}

/* Glass treatment is reserved for machine output on the deep ground. */
.ins-deep .ins-panel,
.ins-panel-glass{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#E4EAF5;
}
.ins-deep .ins-panel p,.ins-panel-glass p{color:#E4EAF5}

.ins-panel-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ins-font-mono);
  font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--ins-muted);
  margin-bottom:12px;
}
.ins-deep .ins-panel-label{color:#8A97AE}

/* Absent / present states for the before-and-after comparison. */
.ins-panel-absent{border-style:dashed}
.ins-panel-absent .ins-panel-label{color:#8A97AE}

/* ------------------------------------------------------- metric badges ---- */

.ins-metric{
  border-top:1px solid var(--ins-line);
  padding-top:18px;
}
.ins-deep .ins-metric{border-top-color:rgba(255,255,255,.14)}
.ins-metric-figure{
  font-family:var(--ins-font-head);
  font-weight:800;
  font-size:clamp(2.1rem,3.4vw,2.9rem);
  line-height:1.02;
  letter-spacing:-0.03em;
  color:var(--ins-accent);
  display:block;
}
.ins-deep .ins-metric-figure{color:#8FA9FF}
.ins-metric-caption{
  font-family:var(--ins-font-body);
  font-size:.92rem;
  color:var(--ins-muted);
  margin-top:6px;
  display:block;
}
.ins-deep .ins-metric-caption{color:#A9B4C7}

/* ---------------------------------------------------------------- cards --- */

.ins-card{
  background:var(--ins-surface);
  border:1px solid var(--ins-line);
  border-radius:var(--ins-r-md);
  padding:30px;
  height:100%;
  transition:transform .22s var(--ins-ease), box-shadow .22s var(--ins-ease), border-color .22s var(--ins-ease);
}
.ins-card-raised:hover{transform:translateY(-3px);box-shadow:var(--ins-shadow);border-color:#C9D3E4}
.ins-deep .ins-card{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}

/* Tinted ground variant so a bento does not read as white-on-white. */
.ins-card-tinted{background:var(--ins-accent-soft);border-color:#D2DCFF}
.ins-card-ink{background:var(--ins-deep);border-color:rgba(255,255,255,.12);color:#FFFFFF}
.ins-card-ink h3,.ins-card-ink .elementor-heading-title{color:#FFFFFF}
.ins-card-ink p{color:#A9B4C7}

/* ------------------------------------------------------ process rail ------ */

.ins-rail{position:relative;padding-left:38px}
.ins-rail::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;
  width:2px;background:linear-gradient(180deg,var(--ins-accent),rgba(31,79,224,.12));
}
.ins-rail-step{position:relative;padding-bottom:38px}
.ins-rail-step:last-child{padding-bottom:0}
.ins-rail-step::before{
  content:"";position:absolute;left:-33px;top:8px;
  width:10px;height:10px;border-radius:var(--ins-r-pill);
  background:var(--ins-accent);
  box-shadow:0 0 0 5px var(--ins-bg);
}
.ins-deep .ins-rail-step::before{box-shadow:0 0 0 5px var(--ins-deep)}
.ins-deep .ins-rail::before{background:linear-gradient(180deg,#8FA9FF,rgba(143,169,255,.12))}

/* ------------------------------------------------------------ accordion --- */

.elementor-accordion .elementor-tab-title,
.e-n-accordion-item-title{
  font-family:var(--ins-font-head)!important;
  font-weight:700!important;
  color:var(--ins-ink)!important;
  font-size:1.06rem!important;
}
.e-n-accordion-item{
  border-bottom:1px solid var(--ins-line);
  border-radius:0!important;
  background:transparent!important;
}

/* ---------------------------------------------------------------- forms --- */

.srfm-form input[type="text"],
.srfm-form input[type="email"],
.srfm-form input[type="url"],
.srfm-form input[type="tel"],
.srfm-form textarea,
.srfm-form select,
input[type="text"],input[type="email"],input[type="url"],
input[type="tel"],textarea,select{
  font-family:var(--ins-font-body);
  font-size:1rem;
  color:var(--ins-ink);
  background:var(--ins-surface);
  border:1px solid var(--ins-line);
  border-radius:var(--ins-r-sm);
  padding:13px 15px;
  width:100%;
  transition:border-color .18s var(--ins-ease), box-shadow .18s var(--ins-ease);
}
input::placeholder,textarea::placeholder{color:#6B7488;opacity:1}
input:focus,textarea:focus,select:focus{
  border-color:var(--ins-accent);
  box-shadow:0 0 0 3px rgba(31,79,224,.16);
  outline:none;
}
label,.srfm-block-label{
  font-family:var(--ins-font-body);
  font-size:.92rem;font-weight:600;color:var(--ins-ink);
}
.srfm-error,.srfm-error-message{color:#B42318;font-size:.88rem}

/* Form sitting inside a deep section. */
.ins-deep label,.ins-deep .srfm-block-label{color:#E4EAF5}
.ins-deep input,.ins-deep textarea,.ins-deep select{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:#FFFFFF;
}
.ins-deep input::placeholder,.ins-deep textarea::placeholder{color:#93A0B8}

/* --------------------------------------------------------------- motion --- */

.ins-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ins-ease), transform .6s var(--ins-ease)}
.ins-reveal.is-in{opacity:1;transform:none}
/* If the script never runs, content must still be visible. */
.no-js .ins-reveal{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .ins-reveal{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ------------------------------------------------------------- header ----- */

.ast-primary-header-bar,.site-header{
  background:rgba(244,246,249,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--ins-line);
}
.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link{
  font-family:var(--ins-font-body);
  font-weight:500;
  font-size:.98rem;
  color:var(--ins-ink);
}
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link{color:var(--ins-accent)}
/* Covers both the desktop and the mobile header, which Astra renders as two
   separate markup trees. Without the mobile selector the wordmark comes out
   white on the light header bar. */
.site-title,
.site-title a,
.ast-site-identity .site-title a,
#ast-desktop-header .site-title a,
#ast-mobile-header .site-title a,
.ast-mobile-popup-drawer .site-title a{
  font-family:var(--ins-font-head);
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--ins-ink);
  font-size:1.32rem;
}
.site-title a:hover,
#ast-mobile-header .site-title a:hover{color:var(--ins-accent)}

/* Header CTA button in the nav. */
.main-header-menu .menu-item.ins-nav-cta > .menu-link{
  background:var(--ins-accent);
  color:#FFFFFF;
  border-radius:var(--ins-r-pill);
  padding:10px 20px;
  margin-left:10px;
}
.main-header-menu .menu-item.ins-nav-cta > .menu-link:hover{background:var(--ins-accent-hover);color:#FFFFFF}

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

.site-footer,.ast-footer-overlay,footer.site-footer{
  background:var(--ins-deep);
  color:#A9B4C7;
}
.site-footer h2,.site-footer h3,.site-footer h4,
.site-footer .widget-title{
  font-family:var(--ins-font-head);
  color:#FFFFFF;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:14px;
}
.site-footer p,.site-footer li{color:#A9B4C7;font-size:.95rem}
.site-footer a{color:#C7D1E2;text-decoration:none}
.site-footer a:hover,.site-footer a:focus{color:#FFFFFF;text-decoration:underline}
.site-footer .ast-builder-html-element,
.ast-footer-copyright{color:#7E8AA1;font-size:.88rem}

/* Astra paints its own background on the footer row wrappers, which sits on top
   of the dark footer and leaves light footer text sitting on white. Let the
   footer element own the ground instead. */
.site-footer .site-primary-footer-wrap,
.site-footer .site-above-footer-wrap,
.site-footer .site-below-footer-wrap,
.site-primary-footer-wrap,
.site-above-footer-wrap,
.site-below-footer-wrap{background-color:transparent}

/* Footer text ramp, contrast-checked against the deep ground. */
.site-footer p,
.site-footer li,
.site-footer .widget{color:#B7C2D4}
.site-footer a{color:#DCE4F0}
.site-footer a:hover,
.site-footer a:focus{color:#FFFFFF}

/* Footer navigation links need a real tap target on touch devices. */
.site-footer .menu-link,
.site-footer .menu-item > a{
  display:inline-block;
  padding-block:7px;
  line-height:1.4;
}
.site-footer .menu li{margin-bottom:0}

/* ------------------------------------------------------------ utilities --- */

.ins-lede,.ins-lede p{font-size:19px;line-height:1.6;color:var(--ins-muted)}
.ins-deep .ins-lede,.ins-deep .ins-lede p{color:#A9B4C7}
.ins-mono{font-family:var(--ins-font-mono);font-size:.86rem;letter-spacing:.01em}
.ins-center{text-align:center}
.ins-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Prevent layout shift from images and embeds. */
img,svg,video,iframe{max-width:100%;height:auto}
img[width][height]{height:auto}

/* ---------------------------------------------------------- responsive ---- */

@media (max-width:880px){
  :root{--ins-xl:64px;--ins-lg:44px}
  body{font-size:16px}
  .ins-section{padding-block:var(--ins-xl)}
  .ins-card{padding:24px}
  .ins-rail{padding-left:30px}
  .ins-rail::before{left:7px}
  .ins-rail-step::before{left:-29px}
  .elementor-button,.ins-btn{width:100%;text-align:center;white-space:normal}
  /* Multi-column Elementor containers collapse to one column. */
  .ins-collapse{flex-direction:column!important}
  .ins-collapse > .e-con,
  .ins-collapse > .elementor-column{width:100%!important;max-width:100%!important}
}

@media (max-width:520px){
  .ins-panel{padding:18px 16px;font-size:14px;line-height:1.65}
}

/* ==========================================================================
   Ground rules that must beat the parent theme's generated CSS.
   ========================================================================== */

/* Astra generates a body background from its global palette. The palette is
   now on-brand, but this keeps the ground correct even if it is edited later. */
html body,
body.ast-separate-container,
body.ast-plain-container{background-color:var(--ins-bg)}

.ins-deep,.ins-deep .e-con-inner{background-color:var(--ins-deep)}
.ins-surface,.ins-surface .e-con-inner{background-color:var(--ins-surface)}
.ins-ground,.ins-ground .e-con-inner{background-color:var(--ins-bg)}

/* --------------------------------------------------------- hero sizing --- */

/* The hero headline is long by design. Hold it to two lines at desktop by
   sizing it to the column rather than to the viewport. */
.ins-hero h1,
.ins-hero .elementor-widget-heading h1.elementor-heading-title{
  font-size:clamp(2rem,3.15vw,2.7rem);
  line-height:1.06;
  letter-spacing:-0.03em;
}
@media (max-width:880px){
  .ins-hero h1,
  .ins-hero .elementor-widget-heading h1.elementor-heading-title{
    font-size:clamp(30px,8vw,40px);
    max-width:none;
  }
}

/* ------------------------------- machine output on a light ground -------- */

/* The glass wash only reads on the deep ground. On a light ground the same
   moment needs its own dark panel, or the text drops below AA contrast. */
.ins-panel-dark{
  background:var(--ins-deep);
  border:1px solid rgba(255,255,255,.12);
  color:#E4EAF5;
  box-shadow:0 24px 60px -30px rgba(10,15,26,.55);
}
.ins-panel-dark p{color:#E4EAF5}
.ins-panel-dark .ins-panel-label{color:#8A97AE}
.ins-panel-dark .ins-cite{background:rgba(31,79,224,.3);color:#B9CBFF}

/* -------------------------------------------------------- button widths -- */

/* Elementor buttons are inline by default; keep them from stretching full
   width inside a flex row at desktop, and stack them cleanly on mobile. */
.elementor-widget-button{width:auto}
@media (max-width:880px){
  .elementor-widget-button{width:100%}
}

/* ------------------------------------------------------- header polish --- */

/* Astra's header button inherits the design system's primary treatment. */
.ast-custom-button,
.ast-header-button-1 .ast-custom-button{
  font-family:var(--ins-font-body);
  font-weight:600;
  border-radius:var(--ins-r-pill);
  background:var(--ins-accent);
  color:#FFFFFF;
  padding:11px 22px;
}
.ast-custom-button:hover{background:var(--ins-accent-hover);color:#FFFFFF}

/* --------------------------------------------------------- rail headings - */

.ins-rail-step h3{margin:0 0 6px;font-size:1.22rem}
.ins-rail-step p{margin:0;max-width:62ch}

/* --------------------------------------------------------- card content -- */

/* ------------------------------------------------------------------ FAQ -- */

.ins-faq{border-top:1px solid var(--ins-line)}
.ins-faq-item{border-bottom:1px solid var(--ins-line)}
.ins-faq-item summary{
  font-family:var(--ins-font-head);
  font-weight:700;
  font-size:1.06rem;
  color:var(--ins-ink);
  padding:20px 44px 20px 0;
  cursor:pointer;
  position:relative;
  list-style:none;
  transition:color .18s var(--ins-ease);
}
.ins-faq-item summary::-webkit-details-marker{display:none}
.ins-faq-item summary:hover{color:var(--ins-accent)}
.ins-faq-item summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-right:2px solid var(--ins-accent);
  border-bottom:2px solid var(--ins-accent);
  transform:rotate(45deg);
  transition:transform .22s var(--ins-ease);
}
.ins-faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.ins-faq-answer{padding:0 44px 22px 0}
.ins-faq-answer p{margin:0;max-width:66ch}

/* ------------------------------------------------------- the audit form -- */

.ins-audit-form{
  background:var(--ins-surface);
  border:1px solid var(--ins-line);
  border-radius:var(--ins-r-md);
  padding:32px;
  box-shadow:var(--ins-shadow);
}
.ins-audit-form .srfm-submit-richtext,
.ins-audit-form button[type="submit"],
.ins-audit-form .srfm-button{
  background:var(--ins-accent)!important;
  color:#FFFFFF!important;
  border-radius:var(--ins-r-pill)!important;
  font-family:var(--ins-font-body)!important;
  font-weight:600!important;
  border:none!important;
  padding:15px 30px!important;
}
.ins-audit-form button[type="submit"]:hover,
.ins-audit-form .srfm-button:hover{background:var(--ins-accent-hover)!important}
@media (max-width:880px){
  .ins-audit-form{padding:22px}
}

.ins-card h3{margin:0 0 10px}
.ins-card p{margin:0 0 12px}
.ins-card p:last-child{margin-bottom:0}
.ins-panel-label + p{margin-top:0}

/* ==========================================================================
   GEO pass additions: definition blocks, feature lists, FAQ heading semantics.
   ========================================================================== */

/* ------------------------------------------------- definition Q&A block --- */

/* The question is a real H3 so the heading outline stays strictly nested, but
   it reads as a lead-in rather than competing with the service name above it. */
.ins-definition{
  border-left:2px solid var(--ins-accent);
  padding:2px 0 2px 20px;
  margin:4px 0 4px;
}
.ins-deep .ins-definition{border-left-color:#8FA9FF}

.ins-question,
h3.ins-question{
  font-family:var(--ins-font-head);
  font-size:1.08rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ins-ink);
  margin:0 0 8px;
}
.ins-deep .ins-question{color:#FFFFFF}
.ins-definition p{margin:0;max-width:64ch}

/* ----------------------------------------------------- feature list ------- */

.ins-sub,
h3.ins-sub{
  font-family:var(--ins-font-body);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ins-muted);
  margin:22px 0 12px;
}
.ins-deep .ins-sub{color:#8A97AE}

ul.ins-list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:64ch;
}
ul.ins-list li{
  position:relative;
  padding-left:26px;
  margin-bottom:10px;
  color:var(--ins-muted);
  line-height:1.6;
}
.ins-deep ul.ins-list li{color:#A9B4C7}
ul.ins-list li:last-child{margin-bottom:0}

/* A drawn tick rather than a glyph, so it takes the accent colour and needs no
   icon font. */
ul.ins-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.55em;
  width:9px;
  height:5px;
  border-left:2px solid var(--ins-accent);
  border-bottom:2px solid var(--ins-accent);
  transform:rotate(-45deg);
}
.ins-deep ul.ins-list li::before{border-color:#8FA9FF}

/* -------------------------------------- FAQ summary carrying a heading ---- */

/* The FAQ question is an H3 inside <summary> so the document outline is
   complete for a crawler, without the heading breaking the disclosure row. */
.ins-faq-item summary h3.ins-faq-q{
  display:inline;
  font-family:var(--ins-font-head);
  font-size:1.06rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-0.01em;
  color:inherit;
  margin:0;
}

/* --------------------------------------------------------- skip link ------ */

/* Astra ships a skip link but hides it even on focus in some header layouts. */
.skip-link:focus,
.skip-link:focus-visible{
  position:absolute!important;
  left:16px;
  top:16px;
  width:auto!important;
  height:auto!important;
  clip:auto!important;
  clip-path:none!important;
  z-index:100000;
  background:var(--ins-accent);
  color:#FFFFFF;
  padding:12px 20px;
  border-radius:var(--ins-r-pill);
  font-family:var(--ins-font-body);
  font-weight:600;
  text-decoration:none;
}

@media (max-width:880px){
  .ins-definition{padding-left:16px}
}

/* ==========================================================================
   Multi-channel pass: pillar strip, comparison matrix, pillar cards.
   ========================================================================== */

/* Sits directly under the hero CTAs. Deliberately restrained: a capability
   index, not a feature section, so no icons, cards or shadows. */
.ins-pillars{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:26px;padding-top:22px;
  border-top:1px solid var(--ins-line);
  max-width:720px;
}
.ins-deep .ins-pillars{border-top-color:rgba(255,255,255,.14)}

.ins-pillar{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 12px;
  border:1px solid var(--ins-line);
  border-radius:var(--ins-r-pill);
  background:var(--ins-surface);
  font-family:var(--ins-font-body);
  font-size:.86rem;font-weight:600;
  color:var(--ins-ink);white-space:nowrap;
  transition:border-color .18s var(--ins-ease), transform .18s var(--ins-ease);
}
a.ins-pillar{text-decoration:none}
a.ins-pillar:hover{border-color:var(--ins-accent);transform:translateY(-1px);color:var(--ins-ink)}
.ins-deep .ins-pillar{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#E4EAF5}

/* The accent dot marks a real capability, not decoration for texture. */
.ins-pillar::before{
  content:"";width:6px;height:6px;
  border-radius:var(--ins-r-pill);
  background:var(--ins-accent);flex:none;
}
.ins-deep .ins-pillar::before{background:#8FA9FF}

@media (max-width:880px){
  .ins-pillars{gap:8px;max-width:none}
  .ins-pillar{font-size:.8rem;padding:6px 12px 6px 10px}
}

/* --------------------------------------------------- comparison matrix ---- */

.ins-compare-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--ins-line);
  border-radius:var(--ins-r-md);
  background:var(--ins-surface);
}
.ins-deep .ins-compare-wrap{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.14)}

table.ins-compare{
  width:100%;min-width:760px;
  border-collapse:collapse;
  font-family:var(--ins-font-body);
  font-size:.95rem;
}
table.ins-compare th,
table.ins-compare td{
  text-align:left;padding:18px 22px;vertical-align:top;
  border-bottom:1px solid var(--ins-line);
}
.ins-deep table.ins-compare th,
.ins-deep table.ins-compare td{border-bottom-color:rgba(255,255,255,.1)}
table.ins-compare tr:last-child th,
table.ins-compare tr:last-child td{border-bottom:0}

table.ins-compare th[scope="row"]{
  font-weight:600;color:var(--ins-ink);
  width:26%;background:var(--ins-bg);
}
.ins-deep table.ins-compare th[scope="row"]{color:#FFFFFF;background:rgba(255,255,255,.03)}

table.ins-compare thead th{
  font-family:var(--ins-font-head);
  font-weight:800;font-size:1rem;
  letter-spacing:-0.01em;color:var(--ins-ink);
  background:var(--ins-bg);
}
.ins-deep table.ins-compare thead th{color:#FFFFFF;background:rgba(255,255,255,.04)}

table.ins-compare td{color:var(--ins-muted)}
.ins-deep table.ins-compare td{color:#A9B4C7}

/* The Inscited column is the answer, so it carries the accent as one
   continuous band down the table. */
table.ins-compare .ins-col-accent{
  background:var(--ins-accent-soft);
  color:var(--ins-ink);font-weight:500;
}
table.ins-compare thead th.ins-col-accent{color:var(--ins-accent);background:var(--ins-accent-soft)}
.ins-deep table.ins-compare .ins-col-accent{background:rgba(31,79,224,.2);color:#E4EAF5}
.ins-deep table.ins-compare thead th.ins-col-accent{color:#B9CBFF;background:rgba(31,79,224,.24)}

.ins-compare-hint{
  font-family:var(--ins-font-body);
  font-size:.82rem;color:var(--ins-muted);margin:10px 0 0;
}
.ins-deep .ins-compare-hint{color:#8A97AE}
@media (min-width:881px){ .ins-compare-hint{display:none} }

/* ---------------------------------------------------------- pillar card --- */

/* The label repeats the pillar's short name, so a scanner can match a card to
   a badge in the hero strip. */
.ins-pillar-label{
  display:inline-block;
  font-family:var(--ins-font-body);
  font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--ins-accent);margin-bottom:10px;
}
.ins-card-ink .ins-pillar-label,
.ins-deep .ins-pillar-label{color:#8FA9FF}
.ins-card-tinted .ins-pillar-label{color:var(--ins-accent)}

.ins-card ul.ins-list{margin-top:14px}
.ins-card ul.ins-list li{font-size:.94rem;margin-bottom:8px}

/* --------------------------------------------------------------- thesis --- */

/* The pull-quote carrying the core argument. Set in the display face on a
   tight measure so it reads as a statement rather than more body copy. */
.ins-thesis,
.ins-thesis p{
  font-family:var(--ins-font-head);
  font-weight:700;
  font-size:clamp(1.3rem,2.1vw,1.72rem);
  line-height:1.32;letter-spacing:-0.02em;
  color:var(--ins-ink);max-width:22ch;
}
.ins-deep .ins-thesis,
.ins-deep .ins-thesis p{color:#FFFFFF}

/* ==========================================================================
   Booking funnel: form states, success UI, process list.
   ========================================================================== */

.ins-booking-form{position:relative}

/* Two-up field rows on desktop, single column on mobile. SureForms sets the
   width inline from fieldWidth, so this only has to fix the small screens. */
@media (max-width:880px){
  .ins-booking-form .srfm-block-wrap,
  .ins-booking-form .srfm-block{width:100%!important;max-width:100%!important}
}

/* ------------------------------------------------------- loading state --- */

.ins-booking-form.is-submitting{pointer-events:none}
.ins-booking-form.is-submitting::after{
  content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.62);
  border-radius:var(--ins-r-md);
  z-index:5;
}
.ins-booking-form button[type="submit"]{position:relative;transition:opacity .18s var(--ins-ease)}
.ins-booking-form.is-submitting button[type="submit"]{opacity:.72}

/* A determinate-looking bar rather than a spinner, because the wait is short
   and a spinner reads as an error state to a lot of people. */
.ins-booking-form.is-submitting button[type="submit"]::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  border-radius:0 0 var(--ins-r-pill) var(--ins-r-pill);
  background:rgba(255,255,255,.85);
  transform-origin:left;
  animation:ins-progress 1.1s var(--ins-ease) infinite;
}
@keyframes ins-progress{
  0%{transform:scaleX(0);opacity:1}
  70%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .ins-booking-form.is-submitting button[type="submit"]::after{animation:none;transform:scaleX(1)}
}

/* ------------------------------------------------------------ success --- */

.ins-success{
  border:1px solid #C8D6C4;
  border-left:3px solid var(--ins-accent);
  background:var(--ins-surface);
  border-radius:var(--ins-r-md);
  padding:30px 32px;
  box-shadow:var(--ins-shadow);
  animation:ins-success-in .42s var(--ins-ease) both;
}
@keyframes ins-success-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ins-success{animation:none}}

.ins-success h3{
  font-family:var(--ins-font-head);
  font-weight:800;
  font-size:1.5rem;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ins-ink);
  margin:0 0 10px;
  padding-left:34px;
  position:relative;
}

/* A drawn tick, so the confirmation needs no icon font and takes the accent. */
.ins-success h3::before{
  content:"";position:absolute;left:0;top:.18em;
  width:22px;height:22px;border-radius:var(--ins-r-pill);
  background:var(--ins-accent);
}
.ins-success h3::after{
  content:"";position:absolute;left:7px;top:.46em;
  width:8px;height:4px;
  border-left:2px solid #FFFFFF;
  border-bottom:2px solid #FFFFFF;
  transform:rotate(-45deg);
}

.ins-success p{color:var(--ins-muted);margin:0 0 10px;max-width:56ch}
.ins-success p:last-child{margin-bottom:0}
.ins-success-note{
  font-size:.9rem;
  padding-top:12px;
  border-top:1px solid var(--ins-line);
  margin-top:16px!important;
}

/* --------------------------------------------------- process + reassure -- */

ol.ins-steps{list-style:none;margin:0;padding:0;counter-reset:ins-step}
ol.ins-steps li{
  counter-increment:ins-step;
  position:relative;
  padding-left:42px;
  margin-bottom:18px;
  color:var(--ins-muted);
  line-height:1.6;
  max-width:60ch;
}
ol.ins-steps li:last-child{margin-bottom:0}
ol.ins-steps li strong{color:var(--ins-ink);font-weight:600}
ol.ins-steps li::before{
  content:counter(ins-step);
  position:absolute;left:0;top:-1px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--ins-r-pill);
  background:var(--ins-accent-soft);
  color:var(--ins-accent);
  font-family:var(--ins-font-head);
  font-weight:800;font-size:.85rem;
}

.ins-reassure{margin-top:26px;background:var(--ins-bg)}
.ins-reassure ul.ins-list li{font-size:.93rem}

/* ------------------------------------------------ inline field feedback --- */

.ins-field-note{
  font-family:var(--ins-font-body);
  font-size:.84rem;
  line-height:1.45;
  margin:6px 0 0;
  color:#B42318;
  min-height:0;
}
.ins-field-note:empty{display:none}

/* Advisory notes are guidance, not failure, so they must not read as red. */
.ins-field-note.is-advisory{color:var(--ins-muted)}

.srfm-block.has-error input,
.srfm-block.has-error textarea,
.srfm-block.has-error select{
  border-color:#B42318;
  box-shadow:0 0 0 3px rgba(180,35,24,.12);
}

/* A valid field gets a quiet accent edge rather than a green tick, so the form
   does not turn into a christmas tree while it is being filled in. */
.srfm-block.is-valid input,
.srfm-block.is-valid textarea,
.srfm-block.is-valid select{border-color:#B9C6E8}

.ins-deep .ins-field-note{color:#FF9B91}
.ins-deep .ins-field-note.is-advisory{color:#A9B4C7}

/* ------------------------------------------- dropdown control polish ----- */

/* TomSelect ships a 16px clear control, which is well under a usable tap
   target. Give it a real hit area without changing how it looks. */
.srfm-dropdown-block .ts-wrapper .clear-button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  min-height:38px;
  border-radius:var(--ins-r-pill);
  cursor:pointer;
}
.srfm-dropdown-block .ts-wrapper .clear-button:hover{background:var(--ins-bg)}
.srfm-dropdown-block .ts-wrapper .clear-button:focus-visible{
  outline:3px solid var(--ins-accent);
  outline-offset:2px;
}

/* Match the dropdown shell to the other inputs so the form reads as one set. */
.srfm-dropdown-block .ts-control{
  min-height:50px;
  border-radius:var(--ins-r-sm)!important;
  border-color:var(--ins-line)!important;
  font-family:var(--ins-font-body);
  font-size:1rem;
  padding:11px 15px!important;
}
.srfm-dropdown-block .ts-wrapper.focus .ts-control{
  border-color:var(--ins-accent)!important;
  box-shadow:0 0 0 3px rgba(31,79,224,.16);
}
.srfm-dropdown-block .ts-dropdown{
  border-radius:var(--ins-r-sm);
  border-color:var(--ins-line);
  font-family:var(--ins-font-body);
  box-shadow:var(--ins-shadow);
}
.srfm-dropdown-block .ts-dropdown .active{background:var(--ins-accent-soft);color:var(--ins-ink)}

/* ==========================================================================
   Service picker: pricing cards, multi-select state, live total.
   ========================================================================== */

.ins-picker{margin:0 0 30px}

.ins-picker-group{
  border:0;
  padding:0;
  margin:0 0 14px;
  min-width:0; /* fieldset defaults to min-content and breaks flex children */
}

.ins-picker-legend{
  display:block;
  width:100%;
  padding:0;
  font-family:var(--ins-font-head);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  color:var(--ins-ink);
  margin-bottom:14px;
}
.ins-picker-hint{
  display:block;
  font-family:var(--ins-font-body);
  font-weight:400;
  font-size:.88rem;
  color:var(--ins-muted);
  margin-top:4px;
}

.ins-picker-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}

/* ------------------------------------------------------------- the card --- */

.ins-opt{
  position:relative;
  display:block;
  border:1px solid var(--ins-line);
  border-radius:var(--ins-r-md);
  background:var(--ins-surface);
  padding:16px 16px 16px 46px;
  cursor:pointer;
  transition:border-color .16s var(--ins-ease), background-color .16s var(--ins-ease), transform .16s var(--ins-ease);
}
.ins-opt:hover{border-color:#C6CEDC;transform:translateY(-1px)}

/* The checkbox stays a real, focusable checkbox. It is positioned rather than
   hidden, so keyboard focus and screen readers behave natively. */
.ins-opt-input{
  position:absolute;
  left:16px;
  top:18px;
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--ins-accent);
  cursor:pointer;
}

.ins-opt-body{display:block}

.ins-opt-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}

.ins-opt-name{
  font-family:var(--ins-font-head);
  font-weight:700;
  font-size:1rem;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ins-ink);
}

/* Price is the thing people scan for, so it never wraps or shrinks. */
.ins-opt-price{
  flex:none;
  font-family:var(--ins-font-head);
  font-weight:800;
  font-size:1.06rem;
  letter-spacing:-0.02em;
  color:var(--ins-accent);
  white-space:nowrap;
}
.ins-opt-free{color:var(--ins-muted)}
.ins-opt-was{
  display:block;
  font-family:var(--ins-font-body);
  font-weight:400;
  font-size:.8rem;
  color:var(--ins-muted);
  text-decoration:line-through;
  margin-top:2px;
}

.ins-opt-blurb{
  display:block;
  font-family:var(--ins-font-body);
  font-size:.9rem;
  line-height:1.5;
  color:var(--ins-muted);
}

/* ------------------------------------------------------------- selected --- */

.ins-opt.is-on{
  border-color:var(--ins-accent);
  background:var(--ins-accent-soft);
}
.ins-opt.is-on .ins-opt-blurb{color:#41506E}

/* Pillars covered by the bundle: still tickable, visibly accounted for. */
.ins-opt.is-bundled .ins-opt-price{
  color:var(--ins-muted);
  text-decoration:line-through;
}
.ins-opt.is-bundled .ins-opt-price::after{
  content:" in bundle";
  font-family:var(--ins-font-body);
  font-size:.74rem;
  font-weight:600;
  text-decoration:none;
  color:var(--ins-accent);
  white-space:nowrap;
}

.ins-opt-input:focus-visible{outline:3px solid var(--ins-accent);outline-offset:2px}
.ins-opt:focus-within{border-color:var(--ins-accent)}

/* --------------------------------------------------------------- bundle --- */

.ins-opt-bundle{
  border-width:2px;
  border-color:var(--ins-accent);
  margin-bottom:12px;
}
.ins-opt-bundle .ins-opt-price{font-size:1.24rem}

.ins-badge{
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
  padding:3px 10px;
  border-radius:var(--ins-r-pill);
  background:var(--ins-accent);
  color:#FFFFFF;
  font-family:var(--ins-font-body);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}

.ins-opt-consult{background:var(--ins-bg)}

/* ---------------------------------------------------------------- total --- */

.ins-total{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
  padding:18px 20px;
  border-radius:var(--ins-r-md);
  background:var(--ins-deep);
  color:#FFFFFF;
}
.ins-total-label{
  font-family:var(--ins-font-body);
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#A9B4C7;
  flex:1 1 auto;
}
.ins-total-value{
  font-family:var(--ins-font-head);
  font-weight:800;
  font-size:1.6rem;
  letter-spacing:-0.02em;
  color:#FFFFFF;
  white-space:nowrap;
}
.ins-picker:not(.has-selection) .ins-total-value{
  font-size:1rem;
  font-weight:600;
  color:#C3CCDB;
}
.ins-total-note{
  flex:1 1 100%;
  font-family:var(--ins-font-body);
  font-size:.84rem;
  line-height:1.45;
  color:#C3CCDB;
}
.ins-total-note:empty{display:none}

/* ----------------------------------------------------- hidden sync fields -- */

/* These carry the selection to the server. They are readonly and driven by the
   picker, so they are removed from the visual and tab order, but stay in the
   DOM and in the submitted payload. */
.ins-booking-form .srfm-slug-services-selected,
.ins-booking-form .srfm-slug-monthly-total{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width:880px){
  .ins-picker-grid{grid-template-columns:1fr;gap:10px}
  .ins-opt{padding:14px 14px 14px 44px}
  .ins-opt-head{
    /* Stop the name and price colliding on a narrow card. */
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .ins-opt-price{font-size:1.1rem}
  .ins-opt-bundle .ins-opt-price{font-size:1.2rem}
  .ins-opt-was{display:inline;margin-left:8px}
  .ins-badge{margin-left:0;margin-top:6px}
  .ins-opt-name{display:block}
  .ins-total{padding:16px}
  .ins-total-value{font-size:1.4rem}
}

@media (prefers-reduced-motion: reduce){
  .ins-opt,.ins-opt:hover{transition:none;transform:none}
}

/* Sync fields, hidden by the picker script once it has claimed them. They stay
   in the DOM and in the payload, out of the visual and tab order. */
.ins-hidden-sync{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* The picker sits directly above the form, so the two read as one flow. */
.ins-booking-form .ins-picker{margin-bottom:26px}