/* ==========================================================================
   FAAES — Drupal additions
   styles.css is the static design verbatim. Rules for markup that only exists
   in Drupal (status messages, admin tabs, form states, editor prose) live
   here so styles.css stays a straight copy.
   ========================================================================== */

/* Editor prose inside designed columns: the static design spaces paragraphs
   with inline margins; body fields get the same rhythm from here. */
.prose > * + *{margin-top:1.1rem}
.prose > p:first-child{margin-top:0}
/* Long-form documents (legal pages): the design's h2 is display-sized. */
.prose h2{font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.15;letter-spacing:-.02em;margin-top:2.8rem}
.prose h3{font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;margin-top:1.8rem}
.prose h2 + *,.prose h3 + *{margin-top:.8rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li + li{margin-top:.45rem}
.prose a{color:var(--maroon);text-decoration:underline;text-underline-offset:3px}
.prose > p:first-child em{font-family:var(--mono);font-style:normal;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}

/* Status messages and editor tabs float in a corner panel rather than in
   the flow: the region always holds a (lazy) placeholder, and an in-flow
   wrapper would push every hero down. */
.page-messages{position:fixed;left:1rem;bottom:1rem;z-index:80;max-width:min(560px,calc(100vw - 2rem))}
.page-messages:empty{display:none}
.page-messages .messages{box-shadow:0 18px 40px -18px rgba(20,6,12,.45);border-radius:var(--r-sm);padding:1rem 1.2rem;margin:0 0 1rem;background:var(--mist);color:var(--ink);border:1px solid var(--line)}
.page-messages .messages--error{background:#FBEFF2;color:#8F1F33;border-color:#F0C9D3}
.page-messages .tabs{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;margin:0 0 1rem;padding:0}
.page-messages .tabs a{display:block;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--line-2);font-size:.85rem}
.page-messages .tabs a.is-active{background:var(--night);color:#fff;border-color:var(--night)}

/* Routes without a designed hero (user pages, bare nodes) still clear the
   floating header. */
.page-plain{padding:calc(var(--hdr) + 3rem) 0 var(--sec)}
.page-plain h1{margin-bottom:1.6rem}

/* Webform: the design's wizard hides inactive steps; Drupal's own error
   summary and per-field errors use the design's .alert / .err styles. */
[data-wizard] .form-actions{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.honeypot-trap{display:none !important}

/* Book-a-demo wizard. The static design coloured these accents inline;
   webform strips style attributes, so the rule lives here. */
.step h2 .it,.done h2 .it{color:var(--maroon)}
.done .lede{margin-top:1rem}
.done .back-home{margin-top:2rem}
.f .form-required::after{content:none;display:none}
.webform-confirmation__message > .steps{margin-bottom:2.4rem}

/* ==========================================================================
   Refinements to the design. styles.css stays a verbatim copy of static/;
   deliberate departures from it live here, after it in the cascade.
   ========================================================================== */

/* Section rhythm. The design's --sec (80–150px) left the first section's
   content below the fold on a 900px-tall screen; this is about two thirds of
   it. Everything spaced from --sec scales with it. */
:root{--sec:clamp(56px,6.5vw,104px)}

/* The section straight after a hero (or the homepage marquee) sits closer,
   so its opening line shows on load. Sections that set their own inline
   padding-top (pricing tiers, the platform index) are unaffected. */
.phero + .sec,.hero + .sec,.marquee + .sec{padding-top:clamp(32px,3.5vw,52px)}
/* Inner-page heroes: a little less air above and below the copy. */
.phero{padding-top:calc(var(--hdr) + clamp(28px,4vw,56px));padding-bottom:clamp(40px,4.5vw,64px)}