/* Section system: "Execution" through "Frequently Asked Questions" (Security & Governance and the FAQ included) follow "Try Our AI Employees" (hi-hello-agents-platform.css).
   Same typeface, pill, title, accent, lead, spacing and content width as that section, set once here instead of in six files.
   Loaded after the per-section stylesheets; every rule starts from the section's id so it wins over their (older) values.
   To switch one section back to its own look, remove its id from the lists below. */

/* Tokens: the same values (and breakpoints) "Try Our AI Employees" uses */
:root{
  --hhs-title:clamp(36px,3.35vw,56px);
  --hhs-lead:clamp(17px,1.4vw,23px);
  --hhs-wrap-w:calc(84% - 40px);--hhs-wrap-max:1460px;
  --hhs-pad:64px;
  --hhs-gutter:max(calc(8vw + 20px),calc((100vw - 1460px)/2));
  --hhs-ink:#080d25;--hhs-muted:#23375a;
  --hhs-accent:linear-gradient(100deg,#005bff 5%,#008df7 40%,#00be39);
}
@media(min-width:1800px){:root{--hhs-title:56px}}
@media(min-width:1400px) and (max-width:1599px){:root{--hhs-wrap-w:calc(90% - 40px);--hhs-gutter:calc(5vw + 20px)}}
@media(min-width:901px) and (max-width:1399px){:root{--hhs-title:3.35vw;--hhs-lead:18px;--hhs-wrap-w:calc(100% - 112px);--hhs-gutter:56px}}
@media(max-width:900px){:root{--hhs-title:clamp(30px,5.9vw,45px);--hhs-lead:17px;--hhs-wrap-w:calc(100% - 48px);--hhs-wrap-max:680px;--hhs-pad:56px;--hhs-gutter:max(24px,calc((100vw - 680px)/2))}}
@media(max-width:540px){:root{--hhs-title:clamp(26px,7.3vw,39px);--hhs-lead:15px;--hhs-wrap-w:calc(100% - 36px);--hhs-pad:48px;--hhs-gutter:18px}}

/* Section: typeface, ink colour, one vertical rhythm, one content width */
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance){
  font-family:inherit;color:var(--hhs-ink);padding-block:var(--hhs-pad);padding-inline:0;scroll-margin-top:84px;
}
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance) :is(button,input,select,textarea){font-family:inherit}
#how-hi-hello-works>.hhw-wrap,#omnichannel-workspace>.hhu-wrap,#integrations-workflows>.hho-wrap,#ai-agent-studio-preview>.hhs-wrap,#campaigns-simulation-analytics>.hhq-wrap,#implementation-support>.hhj-wrap,#security-governance>.hhr-wrap{
  width:var(--hhs-wrap-w);max-width:var(--hhs-wrap-max);margin-inline:auto;
}

/* Pill (eyebrow): the original green gradient pill with its green icon, at one size for all six sections */
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance) :is(.hhw-eyebrow,.hhu-eyebrow,.hho-eyebrow,.hhs-eyebrow,.hhq-eyebrow,.hhj-eyebrow,.hhr-eyebrow){
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;box-sizing:border-box;margin:0;padding:7px 14px;
  border:1px solid transparent;border-radius:999px;background:linear-gradient(110deg,#e0f7eb,#e3f9e8);box-shadow:none;
  color:#101010;font-family:inherit;font-size:14px;font-weight:500;line-height:1.5;letter-spacing:normal;text-transform:none;white-space:nowrap;
}
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance) :is(.hhw-eyebrow,.hhu-eyebrow,.hho-eyebrow,.hhs-eyebrow,.hhq-eyebrow,.hhj-eyebrow,.hhr-eyebrow)>svg{display:block;flex:none;width:20px;height:20px;color:#08b72a}

/* Title: 400 weight, same size scale, same ink; the accent words are 600, upright, one blue-to-green gradient */
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance) h2[id$="-title"]{
  margin-block:26px 0;font-family:inherit;font-size:var(--hhs-title);font-weight:400;line-height:1.1;letter-spacing:-.025em;color:var(--hhs-ink);
}
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance) h2[id$="-title"] :is(em,span){
  display:inline;margin:0;font-style:normal;font-weight:600;white-space:normal;
  background:var(--hhs-accent);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}

/* Lead paragraph */
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance) p[class$="-lead"]{
  margin-block:23px 0;font-family:inherit;font-size:var(--hhs-lead);font-weight:400;line-height:1.4;letter-spacing:normal;color:var(--hhs-muted);
}

/* Icons: one stroke weight (1.7, as in the reference), round caps and joins */
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance) svg[stroke-width="1.6"]{stroke-width:1.7}
:is(#how-hi-hello-works,#omnichannel-workspace,#integrations-workflows,#ai-agent-studio-preview,#campaigns-simulation-analytics,#implementation-support,#security-governance) svg[stroke-linecap]{stroke-linecap:round;stroke-linejoin:round}


/* Intro columns wide enough for the reference title size (they were sized for the older, smaller titles) */
@media(min-width:1301px){#omnichannel-workspace>.hhu-wrap{grid-template-columns:minmax(320px,1.2fr) minmax(0,3fr)}}
@media(min-width:1201px){#ai-agent-studio-preview>.hhs-wrap{grid-template-columns:minmax(0,.34fr) minmax(0,1fr)}}

/* Sub-headings: upright, 500, same tracking as the reference's card titles (the step titles were bold italic) */
#how-hi-hello-works .hhw-step-header h3,
#implementation-support :is(.hhj-expertise>h3,h3[id^="hhj-"]){font-style:normal;font-weight:500;letter-spacing:-.025em;color:var(--hhs-ink)}
#implementation-support .hhj-expertise>h3 em{font-style:normal;font-weight:600;background:var(--hhs-accent);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Campaigns, Simulation & Analytics: above 1450px the intro used to sit in a narrow side column, which cannot hold the reference title size
   (it broke into six short lines). Use the same centred, stacked header the section already has at 1450px and below. */
@media(min-width:1451px){
  #campaigns-simulation-analytics .hhq-layout{grid-template-columns:1fr;gap:36px}
  #campaigns-simulation-analytics .hhq-intro{text-align:center;max-width:980px;margin:auto}
  #campaigns-simulation-analytics h2[id$="-title"] br:first-child{display:none}
  #campaigns-simulation-analytics .hhq-lead{max-width:760px;margin-inline:auto}
}

/* Frequently Asked Questions: the section is its own grid and has no id, so it is addressed by its attributes.
   Same typeface, pill, title, accent, lead, spacing and width as above; the questions and answers are left as they are. */
section[data-track-view="faq"].hh-faq-new{font-family:inherit;color:var(--hhs-ink);width:var(--hhs-wrap-w);max-width:var(--hhs-wrap-max);padding-block:var(--hhs-pad);--faq-gutter:var(--hhs-gutter)}
section[data-track-view="faq"].hh-faq-new :is(button,input,select,textarea){font-family:inherit}
section[data-track-view="faq"].hh-faq-new .hh-faq-label{
  display:inline-flex;align-items:center;align-self:flex-start;gap:8px;box-sizing:border-box;margin:0;padding:7px 14px;
  border:1px solid transparent;border-radius:999px;background:linear-gradient(110deg,#e0f7eb,#e3f9e8);box-shadow:none;
  color:#101010;font-family:inherit;font-size:14px;font-weight:500;line-height:1.5;letter-spacing:normal;text-transform:none;white-space:nowrap;
}
section[data-track-view="faq"].hh-faq-new .hh-faq-title{margin:26px 0 0;font-family:inherit;font-size:var(--hhs-title);font-weight:400;line-height:1.1;letter-spacing:-.025em;color:var(--hhs-ink)}
section[data-track-view="faq"].hh-faq-new .hh-faq-title span{font-weight:600;background:var(--hhs-accent);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
section[data-track-view="faq"].hh-faq-new .hh-faq-intro{margin:23px 0 0;font-family:inherit;font-size:var(--hhs-lead);font-weight:400;line-height:1.4;letter-spacing:normal;color:var(--hhs-muted)}
section[data-track-view="faq"].hh-faq-new .hh-faq-card h3{font-weight:500;letter-spacing:-.025em;color:var(--hhs-ink)}

/* Security & Governance: the headline column is as wide as the type needs, so the title and the paragraph take three lines each
   (as on the Security page). The shield and the checklist share the rest. */
@media(min-width:1101px){
  #security-governance .hhr-hero{grid-template-columns:minmax(0,min(calc(var(--hhs-lead) * 28),46%)) minmax(0,.8fr) minmax(0,.9fr)}
  #security-governance .hhr-lead{max-width:none}
}

/* FAQ: the question list is as tall as the left column, so the "Have a specific question?" card and the last question end on the same line.
   The extra height goes into the gaps between questions; the row follows its content instead of stretching to the screen height. */
@media(min-width:1100px){
  section[data-track-view="faq"].hh-faq-new{align-content:start}
  section[data-track-view="faq"].hh-faq-new [data-slot="accordion"]{align-self:stretch;justify-content:space-between}
}

/* Security & Governance: "Explore Our Security Framework" is the same size as "Talk to Our Implementation Team" (same height, padding, type and icon). */
#security-governance .hhr-cta{gap:11px;min-height:50px;padding:13px calc(25px + .17em);font-size:clamp(14px,1.15vw,18px);font-weight:550;line-height:1.2;letter-spacing:-.035em}
#security-governance .hhr-cta svg{width:22px;height:22px}
/* ...and it follows the Implementation button at every width (same breakpoints, same values; the side padding is a few px wider because its label is a few px shorter) */
@media(min-width:1301px) and (max-width:1500px){#security-governance .hhr-cta{padding-inline:calc(19px + .17em);font-size:14px}}
@media(max-width:1300px){#security-governance .hhr-cta{font-size:16px}}
@media(max-width:700px){#security-governance .hhr-cta{display:flex;width:100%;max-width:420px;margin-inline:auto;font-size:15px;padding:13px 17px;min-height:49px}}
@media(max-width:380px){#security-governance .hhr-cta{font-size:14px}}
@media(min-width:1301px) and (max-height:800px){#security-governance .hhr-cta{min-height:45px;padding-block:10px}}

/* Security & Governance: the descriptions in the six feature cards and the Compliance & Assurance bar, text 10% larger than the section had.
   Same height-based formulas as the section's own, times 1.1, so it scales the same way on every screen. The card titles keep their size:
   "Enterprise Knowledge (RAG)" is already at the edge of one line. (Below 1100px these already use sizes this big.) */
@media(min-width:1101px){
  #security-governance .hhr-features p{font-size:clamp(11px,1.375svh,12.1px)}
  #security-governance .hhr-compliance>h3{font-size:clamp(18.7px,2.53svh,24.2px)}
  #security-governance .hhr-standard h4{font-size:clamp(13.2px,1.98svh,17.6px)}
  #security-governance .hhr-standard p{font-size:clamp(11px,1.43svh,13.2px)}
}
@media(min-width:1101px) and (max-height:800px){
  #security-governance .hhr-standard h4{font-size:14.3px}
  #security-governance .hhr-standard p{font-size:11px}
}