/*
 * Additions on top of nd.css (extracted from the prototype).
 * Kept separate so the prototype CSS stays diffable against future exports.
 */

/* ---------- Modal and drawer transitions ---------- */
/* The prototype toggles display, which cannot animate. Keep the element in
   flow and drive opacity/visibility instead. */

.modal {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sheetm {
  transform: translateY(10px) scale(.985);
  transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}

.modal.open .sheetm {
  transform: none;
}

.drawer {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The prototype animates the drawer with a one-way @keyframes slide.
   A transition is used instead so closing animates too. */
.drawer .sheet {
  animation: none;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}

.drawer.open .sheet {
  transform: none;
}

@media (max-width: 560px) {
  .sheetm {
    transform: translateY(10px) scale(.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .drawer,
  .sheetm,
  .drawer .sheet {
    transition-duration: .01ms;
  }
}

/* ---------- Container width ---------- */
/* The prototype sets --maxw:1440px, which with a 32px gutter yields a 1376px
   content column. Measured against ON26-Home-Blue.pdf, the design column is
   1120px wide (x 160..1280, consistent across 16 blocks). 1120 + 2*32 = 1184.
   Only viewports above 1184 are affected; 1024/768/390 already resolve to the
   spec values of 960/720/350. */
:root {
  --maxw: 1184px;
}

/* ---------- Breakpoint fixes ---------- */
/* Checked against the *-resolutions spec sheets at 1440 / 1024 / 768 / 390. */

/* Notary grid never left 5 columns in the prototype: .hm-people is declared
   at base and again at 1040, both repeat(5,1fr), and never after. The spec
   calls for 3 across at 768 and 2 at 390. */
@media (max-width: 900px) {
  .hm-people {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .hm-people {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The prototype declares .hm-hero p twice inside the same 760 block
   (18px then 17px). The spec says 18px. */
@media (max-width: 760px) {
  /* The image URL is applied inline for the desktop Hero. It must be
     explicitly disabled on mobile only when a separate mobile photo (.shot)
     is present, otherwise it duplicates behind it. A Hero with no mobile
     photo (or the colour-only variant) keeps its own background as set. */
  .nd .hm-hero:has(> .shot) {
    background-image: none !important;
    background-color: #fff !important;
  }

  .nd .hm-hero .shot {
    background-position: center top;
  }

  .hm-hero p,
  .hm-hero .hm-hero-sub {
    font-size: 18px;
  }
}

/* Figma B2: uploaded partner marks are always presented in grayscale. */
.hm-logos img {
  filter: grayscale(1);
}

/* Figma C1/C7: real embeds fill the device frame and feature artwork keeps
   its intrinsic height instead of being cropped to the prototype ratio. */
.hm-demo .screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

/* Guideflow's responsive wrapper contains only an absolutely positioned
   iframe, so as a flex child it otherwise has no intrinsic width and can
   collapse to zero. */
.hm-demo .screen > div {
  width: 100%;
  min-width: 0;
}

.hm-feature .hm-art {
  aspect-ratio: auto;
}

.hm-feature .hm-art picture,
.hm-feature .hm-art .hm-illustration {
  display: block;
  width: 100%;
  height: auto;
}

.hm-story-panel.is-logo-only {
  display: grid;
  place-items: center;
  padding: 48px;
  background: var(--mist);
}

.hm-story-panel.is-logo-only img {
  width: min(78%, 420px);
  height: auto;
  object-fit: contain;
}

.hm-story-panel.is-logo-only picture {
  display: grid;
  place-items: center;
}

.hm-story-panel.is-logo-only[hidden] {
  display: none;
}

.hm-faq > .hm-sub {
  margin-top: -22px;
  margin-bottom: 32px;
}

@media (max-width: 560px) {
  .has-mobile-bg {
    background-image: var(--nd-mobile-bg) !important;
  }
}

/* ---------- Vertical rhythm ---------- */
/* The prototype hung section spacing off #homeview, its navigation stub.
   That wrapper is gone, so the same rules move to the page main element. */
.nd-main {
  padding: var(--block-gap) 0;
}

.nd-main > section {
  margin-bottom: var(--block-gap);
}

.nd-main > section:last-of-type {
  margin-bottom: 0;
}

/* Hero and partner marks form one compact Figma group. Applies to both the
   Home hero (.hm-hero-sec) and the Lane hero (.ln-hero-sec). The Lane hero
   with a video also prints its lightbox .modal as the next sibling (fixed
   position, takes no layout space) - match past it too, otherwise :has()
   never reaches the logos section and the generic --block-gap applies. */
.nd-main > .hm-hero-sec:has(+ section .hm-logos) {
  margin-bottom: 0;
}

.nd-main > section:has(> .hm-logos) {
  margin-bottom: 32px;
}

/* The Lane board measures 24px from the hero to the logo strip and 72px from
   the strip to the next heading - not the Home page's 0/32. */
.nd-main > .ln-hero-sec:has(+ section .hm-logos),
.nd-main > .ln-hero-sec:has(+ .modal + section .hm-logos) {
  margin-bottom: 24px;
}

.nd-main > .ln-hero-sec + section:has(> .hm-logos),
.nd-main > .ln-hero-sec + .modal + section:has(> .hm-logos) {
  margin-bottom: 72px;
}

/* 72 is the desktop measurement; the strip already gains its own padding on
   narrow screens, so keep the gap in proportion there. */
@media (max-width: 1040px) {
  .nd-main > .ln-hero-sec + section:has(> .hm-logos),
  .nd-main > .ln-hero-sec + .modal + section:has(> .hm-logos) {
    margin-bottom: 32px;
  }
}

@media (max-width: 560px) {
  .nd-main > .ln-hero-sec + section:has(> .hm-logos),
  .nd-main > .ln-hero-sec + .modal + section:has(> .hm-logos) {
    margin-bottom: 16px;
  }
}

/* Item 10: gap after the Nationwide states block should be 48px, not the
   generic --block-gap (72px at desktop). */
.nd-main > section:has(> .hm-states) {
  margin-bottom: 48px;
}

/* Item 29: the footer's own Figma frame is 1440 wide with 24px side
   padding (1392px content) - it's the one section that does NOT follow
   the site-wide 1184px --maxw measured from the other 16 blocks above. */
.foot {
  --maxw: 1440px;
}

/* Same exception for the global chrome: Figma's header board puts the logo
   at x=40 from the frame edge, i.e. the announcement bar and header span the
   full 1440 frame with 40px padding. Capping them at the shared 1184px
   content width pushed the logo to x=160 at a 1440 viewport. */
.announce,
.head {
  --maxw: 1440px;
}

@media (min-width: 981px) {
  .foot .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ---------- Background images the prototype never sized ---------- */
/* These elements only ever held a flat placeholder colour. */
.hm-state i,
.hm-api .shot {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hm-tab .badge { overflow: hidden; }

/* .av is styled for an <img> child but has no clipping of its own. */
.hm-people .av {
  overflow: hidden;
}

/* ---------- Form states ---------- */

.field.has-error input,
.field.has-error textarea {
  border-color: var(--orange, #EE4C1B);
}

.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--orange, #EE4C1B);
}

.submit[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

.form-status {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.4;
}

.form-status[data-state="error"] {
  color: var(--orange, #EE4C1B);
}

.form-done {
  padding: 32px 0 8px;
  text-align: center;
}

.form-done h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--navy, #0C2045);
}

.form-done p {
  margin: 0;
  color: var(--muted, #3A4A68);
}

/* Standard HubSpot embed: the agreed primary form integration. */
.hm-contact .embed:has(.nd-hubspot-form),
.hm-contact .embed:has(.nd-hs-missing),
.ln-contact .embed:has(.nd-hubspot-form),
.ln-contact .embed:has(.nd-hs-missing) {
  height: auto;
  min-height: 300px;
}

/* HubSpot's iframe is transparent. Keep the inline form on the same clean
   white surface as the popup instead of exposing the legacy ghost backdrop. */
.hm-contact .embed.is-hubspot-embed,
.ln-contact .embed {
  height: auto;
  min-height: 300px;
  background: #fff;
  border-radius: 0;
  overflow: visible;
}

.hm-contact .embed.is-hubspot-embed iframe,
.ln-contact .embed iframe {
  display: block;
  width: 100% !important;
  border: 0;
  background: #fff;
}

.sales-hubspot-embed {
  min-height: 320px;
}

.nd-hs-missing {
  margin: 0;
  padding: 24px;
  color: var(--navy);
  text-align: center;
}

/* A third-party HubSpot iframe cannot mount inside ACF's AJAX preview. Keep
   the block identifiable and compact in Gutenberg instead of showing an
   unexplained empty placeholder. */
.acf-block-preview .hm-contact .embed.is-hubspot-embed {
  min-height: 150px;
  border: 1px dashed #B8C4D8;
  border-radius: 6px;
  background: #F5F7FB;
}

.nd-embed-note {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--navy, #0C2045);
  text-align: center;
}

.nd-embed-note strong {
  font-size: 20px;
}

.nd-embed-note span {
  color: var(--muted, #3A4A68);
}

.hm-trustbox {
  width: 100%;
  min-height: 28px;
  margin: 12px auto 0;
}

/* ---------- Mega-menu icon alignment ---------- */
.mega-list a {
  min-height: 46px;
  white-space: nowrap;
}

.mega-list svg {
  display: block;
  align-self: center;
}

/* ---------- Cookie notice: new-design skin ---------- */
.nd #cookie-notice {
  right: 24px !important;
  bottom: 24px !important;
  left: 24px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 1120px;
  margin: 0 auto;
  background: #fff !important;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(12, 32, 69, .18);
  color: var(--navy) !important;
  font-family: Barlow, sans-serif !important;
  z-index: 100000;
}

/* Cookie Notice toggles this class after a consent choice. Its revoke-state
   rule otherwise keeps the same element visible on this isolated template. */
.nd #cookie-notice.cookie-notice-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.nd #cookie-notice .cookie-notice-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none !important;
  padding: 18px 56px 18px 24px !important;
  color: var(--navy) !important;
  text-align: left !important;
}

.nd #cookie-notice #cn-notice-text,
.nd #cookie-notice #cn-notice-text p {
  display: block;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.45;
}

.nd #cookie-notice #cn-notice-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nd #cookie-notice #cn-notice-buttons {
  display: flex !important;
  flex: 0 0 auto;
  gap: 10px;
  margin: 0 !important;
}

.nd #cookie-notice .cn-button {
  min-width: 112px;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 1px solid var(--blue) !important;
  border-radius: 6px !important;
  background: var(--blue) !important;
  color: #fff !important;
  font: 700 15px/1 Barlow, sans-serif !important;
  cursor: pointer;
}

.nd #cookie-notice #cn-refuse-cookie {
  background: #fff !important;
  color: var(--blue) !important;
}

.nd #cookie-notice .cn-close-icon {
  top: 18px !important;
  right: 18px !important;
  margin: 0 !important;
  opacity: .7;
}

.nd #cookie-notice .cn-close-icon:hover {
  opacity: 1;
}

@media (max-width: 720px) {
  .nd #cookie-notice {
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
  }

  .nd #cookie-notice .cookie-notice-container {
    display: block !important;
    padding: 20px !important;
  }

  .nd #cookie-notice #cn-notice-text,
  .nd #cookie-notice #cn-notice-text p {
    padding-right: 18px;
    font-size: 14px;
  }

  .nd #cookie-notice #cn-notice-buttons {
    margin-top: 16px !important;
  }

  .nd #cookie-notice .cn-button {
    flex: 1 1 50%;
    min-width: 0;
  }

  .nd #cookie-notice .cn-close-icon {
    top: 14px !important;
    right: 14px !important;
  }
}

/* ---------- Focus visibility ---------- */
/* The prototype relies on the UA default, which disappears once a dialog
   takes focus programmatically. */

.sheetm :focus-visible,
.sheet :focus-visible {
  outline: 2px solid var(--blue, #055DFF);
  outline-offset: 2px;
}

/* ---------- Editor-only notes ---------- */
/* Embeds that mount from an enqueued script cannot render inside ACF's
   AJAX block preview. */

.nd-embed-note {
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 15px;
  color: var(--muted, #3A4A68);
}

/* ---------- September design-review corrections ---------- */
/* Desktop chrome uses its own Figma insets instead of inheriting the page
   content gutter. Mobile keeps the responsive gutter declared in nd.css. */
@media (min-width: 981px) {
  .announce .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .head .wrap {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.head,
.announce,
.sheet,
.sheetm,
.foot {
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
}

/* Legacy theme rules assign Helvetica directly to links and buttons, so a
   family on the header wrapper alone is not enough. Keep every textual part
   of the new-design chrome on the Figma Barlow family. Item 12: the same
   legacy override reaches the footer's links too. */
.head *,
.announce *,
.foot * {
  font-family: 'Barlow', system-ui, -apple-system, sans-serif !important;
}

.nd-main {
  padding-top: 42px;
  color: #000;
}

.nd-main h1,
.nd-main h2,
.nd-main h3,
.nd-main h4,
.nd-main h5,
.nd-main h6 {
  color: #000;
}

.nd-main .hm-api h2 {
  color: #fff;
}

/* Consistent button baseline, weight and interaction across Gutenberg blocks. */
.nd-main button,
.nd-main .cta,
.nd-main .cta-ghost,
.sheetm button,
.sheet-foot a {
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
}

.nd-main .cta,
.hm-card button,
.hm-api .white,
.submit {
  font-weight: 700;
  line-height: 1;
}

/* "More States" is a plain text toggle, not a button - Figma dev mode
   shows it as Barlow Medium (500), not bold. It got swept into the button
   bold-weight fix above by mistake. */
.hm-states .hm-more {
  font-weight: 500;
  line-height: 1;
}

/* Ghost (outline) buttons: Barlow Bold (700), confirmed on the Hero
   "Business Plans" button in Figma dev mode. */
.nd-main .cta-ghost {
  font-weight: 700;
  line-height: 1;
}

/* Editable CTA labels may be longer than the design defaults. Buttons keep
   their Figma minimum size, then grow or wrap instead of clipping the label. */
.nd-main .cta,
.nd-main .cta-ghost,
.nd-main .hm-api .white,
.nd-main .hm-api .outline {
  max-width: 100%;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* !important is required here: the hero buttons' colours come from ACF
   colour-picker fields rendered as inline style="background-color:...",
   which otherwise always wins over any stylesheet rule, hover included. */
.hm-hero .cta:hover,
.hm-card .cta:hover,
.hm-band .cta:hover {
  background: var(--blue-hover) !important;
}

.hm-hero .cta-ghost:hover {
  background: #F2F7FF !important;
}

.hm-feature .hm-h2 strong,
.hm-stories-sec > .hm-h3 strong,
.hm-recruit .hm-h4 strong,
.hm-contact h2,
.hm-tab strong {
  font-weight: 700;
}

/* Uploaded marks keep a stable optical box regardless of source dimensions. */
.hm-logo-item,
.hm-logo-item a {
  min-width: 0;
}

.hm-logo-item img {
  width: auto !important;
  height: auto !important;
  max-width: 145px !important;
  max-height: 45px !important;
  object-fit: contain !important;
}

/* The three-part CTA is defined by equal panel heights in the design. */
.hm-band3 {
  align-items: stretch;
}

.hm-band3 .hm-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.hm-band3 .hm-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hm-feature .hm-art picture,
.hm-feature .hm-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.hm-feature .hm-art img {
  object-fit: cover;
  object-position: center;
}

.hm-stories-more {
  font-size: 13px;
}

/* Figma uses a fixed 3 x 2 logo matrix at tablet and mobile widths.
   Raised from 900 to 1040: below 1040 the flex row (nowrap + scroll) could
   crop or fully hide the first/last logo depending on exact width - logos
   must never be cropped or hidden at any resolution. */
@media (max-width: 1040px) {
  .hm-logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .hm-logo-item {
    width: 100%;
    height: 43px;
    flex-basis: auto;
  }

  .hm-logo-item img {
    max-width: 120px !important;
    max-height: 38px !important;
  }
}

/* Kept at the original 900px threshold (not widened with the logo fix
   above): between 901-1039px the layout is still the desktop 3-column
   split, where object-fit:cover is correct - contain here left a visible
   background-colour seam next to the photo. */
@media (max-width: 900px) {
  .hm-band3 .hm-img img {
    object-fit: contain;
  }
}

@media (max-width: 760px) {
  .nd-main {
    padding-top: 24px;
  }

  /* Item 40: Figma's mobile spec plate is 350x233 (~230px, per the review note). */
  .hm-feature .hm-art {
    min-height: 233px;
  }

  .hm-feature .hm-art picture,
  .hm-feature .hm-art .hm-illustration,
  .hm-feature .hm-art picture img {
    display: block;
    width: 100%;
    height: 233px;
    object-fit: cover;
    object-position: center;
  }

  .hm-stories-more {
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  /* logos-resolutions spec: 390px is 2-per-row x 3 rows, not 3-per-row. */
  .hm-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  .hm-logo-item img {
    max-width: 92px !important;
    max-height: 34px !important;
  }
}

/* Story card headline: the desktop <br class="hm-force-break"> is tuned for
   the 303px tab width. At the narrow mobile column (167px) it fights natural
   wrapping and produces a different composition than Figma's mobile spec. */
@media (max-width: 760px) {
  .hm-tab .hm-story-copy br.hm-force-break {
    display: none;
  }
}

/* Notaries heading (item 16): the bold "50,000+ Virtual Notaries" prefix is
   Barlow SemiBold (600) in Figma, not the shared .hm-h4 strong weight of
   700 — confirmed by selecting that run directly in Figma dev mode. The
   Figma's exported CSS for the whole line ("50,000+ Virtual Notaries Are
   Ready When Your Clients Are") gives font-weight:600 uniformly - no
   bold/regular split between the two runs.
   Desktop gap under the subtitle is 32px, not 40px. */
.hm-people-sec .hm-h4 strong {
  font-weight: 600;
}

.hm-people-sec .hm-sub {
  margin-bottom: 32px;
}

/* Item 1 (corrected): announcement bar and header both use 40px side
   padding, tighter than the shared .wrap gutter. Scoped to these two
   containers only; the shared --gutter used elsewhere is untouched. */
.wrap.in,
.wrap.bar {
  padding-left: 40px;
  padding-right: 40px;
}

/* Item 3: gap between the sticky header and the first section (Hero) is
   42px in the design, independent of --block-gap (72px), which governs
   spacing between every other pair of blocks and is left untouched. */
.nd-main {
  padding-top: 42px;
}

/* Item 14: Freshworks Help widget launcher sits too low, overlapping the
   footer address line. The iframe position is inline-styled by the
   Freshworks loader script on the parent page (same-origin element, not
   the widget's own cross-origin content) so !important is required. */
#launcher-frame {
  bottom: 42px !important;
}

/* ---------- Block editor preview ---------- */
/* The editor canvas is much narrower than the front end, but media queries
   inside it follow the window rather than the canvas, so the Lane blocks keep
   their desktop columns and squeeze - fixed 240px wells against a collapsed
   1fr, three stat columns in a third of the width. Fall back to the stacked
   layout there, the same one the narrow breakpoints use. */
.editor-styles-wrapper .ln,
.acf-block-preview .ln {
  --ln-gutter: 24px;
}

.editor-styles-wrapper .ln-hero,
.editor-styles-wrapper .ln-three,
.editor-styles-wrapper .ln-stats,
.editor-styles-wrapper .ln-case-body,
.editor-styles-wrapper .ln-quote,
.editor-styles-wrapper .ln-quotes,
.editor-styles-wrapper .ln-contact,
.acf-block-preview .ln-hero,
.acf-block-preview .ln-three,
.acf-block-preview .ln-stats,
.acf-block-preview .ln-case-body,
.acf-block-preview .ln-quote,
.acf-block-preview .ln-quotes,
.acf-block-preview .ln-contact {
  grid-template-columns: 1fr;
  gap: 16px;
}

.editor-styles-wrapper .ln-case,
.acf-block-preview .ln-case {
  padding: 24px;
}

.editor-styles-wrapper .ln-hero .copy,
.acf-block-preview .ln-hero .copy {
  padding: 32px 24px;
}

.editor-styles-wrapper .ln-hero .media,
.acf-block-preview .ln-hero .media {
  aspect-ratio: 342/311;
}

.editor-styles-wrapper .ln-contact .collage,
.acf-block-preview .ln-contact .collage {
  aspect-ratio: 342/230;
}

.editor-styles-wrapper .ln-case-body .shot,
.editor-styles-wrapper .ln-quote .shot,
.acf-block-preview .ln-case-body .shot,
.acf-block-preview .ln-quote .shot {
  max-width: 240px;
}