:root {
  --header: #1c87d9;
  --sky: #238dda;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Mirrors live formyoula.com: Squarespace's Arial 18px text on a 28.8px line (the em line height is inherited in px) */
body {
  margin: 0;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  background: #fff;
}
img { max-width: 100%; height: auto; }
/* Like live, long URLs in text break instead of widening the page on phones */
main p, main li { overflow-wrap: break-word; }
a { color: #1b1b1b; text-decoration: none; }
a:hover { text-decoration: underline; }
/* Keep headings light across every page */
h1, h2, h3 { font-weight: 400; }
/* Match live's desktop page-title scale */
h1 { font-size: 48px; line-height: 1.35em; }
/* Match live's desktop section-heading scale and tracking */
h2 { font-size: 37px; line-height: 1.3em; letter-spacing: 1px; }
/* Match live's compact third-level headings */
h3 { font-size: 26px; line-height: .9em; }
/* Use Squarespace's faint divider treatment */
hr { border: 0; border-top: 1px solid rgba(102, 102, 102, .15); }

/* Header: links either side of a centred logo */
.site-header { position: relative; z-index: 5; min-height: 94.9px; background: var(--header); }
/* Live smooths the white header, bar and footer text in greyscale on Macs */
.site-header, .scroll-nav, .site-footer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Overlay the home header on the hero */
.page-home .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
/* Match the live navigation's small tracked type */
.nav { font-size: 13px; letter-spacing: 1px; }
/* Keep navigation links white and on one line */
.nav a { color: #fff; white-space: nowrap; }
/* Preserve the unadorned navigation hover state */
.nav a:hover { text-decoration: none; }
/* Centre the logo independently of the link groups */
.logo { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); }
/* Draw the desktop logo at its live width */
.logo img { display: block; width: 168px; }
/* Position both desktop link groups alongside the logo */
.nav-left, .nav-right { position: absolute; top: 29px; display: flex; align-items: center; gap: 4.4px; height: 37px; }
/* Anchor the left links against the logo */
.nav-left { right: calc(50% + 118.4px); }
/* Anchor the right links against the logo */
.nav-right { left: calc(50% + 114px); }
/* Match the desktop link hit areas and line height */
.nav-left a, .nav-right a { padding: 9.75px 13px; line-height: 13px; }
/* Outline Sign In as a compact pill */
.signin { border: 2px solid #fff; border-radius: 15px; }
/* Keep the menu toggle hidden at desktop widths */
.nav-toggle { display: none; }

/* Home only: past the hero, live slides in a fixed copy of the nav without the logo (see site.js) */
.scroll-nav {
  position: fixed;
  top: -20px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 3.6px;
  padding: 5px 0;
  background: var(--header);
  font-size: 13px;
  letter-spacing: 1px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease-in-out, visibility 0s .14s, top .14s ease-in-out;
}
/* Pin the cloned nav to the top once the hero scrolls away */
.scrolled .scroll-nav { top: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
/* Match cloned-nav links to the main desktop links */
.scroll-nav a { padding: 9.75px 13px; color: #fff; line-height: 13px; white-space: nowrap; }
/* Keep cloned-nav links unadorned on hover */
.scroll-nav a:hover { text-decoration: none; }
/* Nav links land with the section just below the bar, as on live */
.page-home .index-section { scroll-margin-top: var(--scroll-nav-height, 46px); }

/* Squarespace layout: 1012px of content, blocks padded 17px (the first block on a page has no top padding) */
.page { max-width: 1080px; margin: 0 auto; padding: 100px 34px 117px; }
/* Use the tighter live padding inside index sections */
.index-section .page { padding: 68px 34px 85px; }
/* Build 17px grid gutters with negative row margins */
.row { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 -17px; }
/* Separate consecutive grid rows by one block gap */
.row + .row { margin-top: 34px; }
/* Give every grid column a 17px gutter */
.col { min-width: 0; padding: 0 17px; }
.span-1 { width: 8.333%; }
.span-2 { width: 16.666%; }
.span-3 { width: 25%; }
.span-4 { width: 33.333%; }
.span-5 { width: 41.666%; }
.span-6 { width: 50%; }
.span-7 { width: 58.333%; }
.span-8 { width: 66.666%; }
.span-9 { width: 75%; }
.span-10 { width: 83.333%; }
.span-11 { width: 91.666%; }
.span-12 { width: 100%; }
/* Nested columns are fractions of their parent column (phones stack them) */
@media (min-width: 641px) {
  /* Split five-column children evenly inside a ten-column parent */
  .span-10 > .row > .span-5 { width: 50%; }
  /* Preserve a four-of-seven nested column on desktop */
  .span-7 > .row > .span-4 { width: 57.143%; }
  /* Preserve a three-of-seven nested column on desktop */
  .span-7 > .row > .span-3 { width: 42.857%; }
  /* Preserve a three-of-five nested column on desktop */
  .span-5 > .row > .span-3 { width: 60%; }
  /* Preserve a two-of-five nested column on desktop */
  .span-5 > .row > .span-2 { width: 40%; }
}

/* Collapsing margins give Squarespace's gaps: 34px between blocks, 18px inside text, 68px around rules */
.col > * { margin-top: 34px; margin-bottom: 34px; }
/* Use live's tighter paragraph rhythm inside blocks */
.col > p { margin-top: 18px; margin-bottom: 18px; }
/* Keep button rows on the standard block rhythm */
.col > .button-row { margin-top: 34px; margin-bottom: 34px; }
/* Pull following content closer to block headings */
.col > h1, .col > h2, .col > h3 { margin-bottom: .3em; }
/* A subheading in the same text block as its heading sits 24px under it */
.col > h1 + h3 { margin-top: 24px; }
/* Give dividers two block gaps on either side */
.col > hr { margin: 68px 0; }
/* Remove leading block space within a column */
.col > :first-child { margin-top: 0; }
/* Remove trailing block space within a column */
.col > :last-child { margin-bottom: 0; }
/* Let direct image blocks fill their columns */
.col > img { width: 100%; }
/* Make linked image blocks occupy the full row */
.col > a { display: block; }
/* Live's "inline" image blocks keep a small image at its natural size */
.col > img.natural { width: auto; }
/* An empty image caption on live leaves 18px under the image */
img.captioned { padding-bottom: 18px; }
.col img { display: block; margin-left: auto; margin-right: auto; }
/* Match spacer blocks to one live grid gap */
.spacer { height: 34px; }
.text-align-center { text-align: center; }

/* Squarespace block padding quirks above phone widths (phones pad every block): a block alone in its column
   in a page's first row has no bottom padding, so what follows starts 17px closer, and the last blocks of a
   page's last row have none either, unless they end a single row's column of several blocks */
@media (min-width: 641px) {
  /* Shrink the gap after a lone first-row block to a half gap */
  main > .page > .row:first-child:has(> .col > :only-child) + .row { margin-top: 17px; }
  /* Remove the nested first row's trailing gap */
  main > .page > .row:first-child > .col > .row:first-child { margin-bottom: 0; }
  /* Shrink the gap after the nested first row to a half gap */
  main > .page > .row:first-child > .col > .row:first-child + * { margin-top: 17px; }
  /* Use live's reduced 100px bottom padding for multi-row and single-block pages */
  main > .page:has(> .row + .row), main > .page:has(> .row:only-child > .col:only-child > :only-child), main > .page.single-block { padding-bottom: 100px; }
  /* Retain one final gap when a divider ends a column */
  .col > hr:last-child { margin-bottom: 34px; }
}

/* Home hero */
.hero {
  background-color: var(--sky);
  background-image: var(--hero-image);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  color: #fff;
  text-align: center;
}
.page-home .hero .page { padding: 136px 34px; }
.page-home .hero h2, .page-home .hero strong { color: #fff; }
.page-home .hero .col > h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.page-home .hero .col > img { margin-top: 0; }
.page-home .hero .col > .text-align-center { margin-bottom: .3em; font-size: 24px; font-weight: 400; }
/* Live smooths the white hero tagline and trial button text in greyscale on Macs */
.page-home .hero .col > .text-align-center, .page-home .hero .trial-button { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Like live, keep the hero trial button green on hover instead of darkening it */
.page-home .hero .trial-button:hover { background: #56ea17; }
/* Like live, render the hero tagline with optimizeLegibility */
.page-home .hero .col > .text-align-center { text-rendering: optimizeLegibility; }
/* Like live, smooth the Build, Capture and Distribute headings in greyscale and render them with optimizeLegibility */
.page-home .hero .col > h2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Share the live green trial-button treatment across pages */
.trial-button {
  display: inline-block;
  padding: 15px 35px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #56ea17;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.42857143;
  vertical-align: middle;
  white-space: nowrap;
}
.trial-button:hover { background: #49d810; text-decoration: none; }

/* Squarespace buttons: small ones are rounded 12px bold, large ones square, uppercase and dark grey */
.col > .button-row { display: flex; justify-content: center; }
/* Live aligns some buttons to one side of their column */
.col > .button-row-right { justify-content: flex-end; }
/* Allow selected button rows to align left */
.col > .button-row-left { justify-content: flex-start; }
/* Reproduce the live small Squarespace button */
.sqs-button {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 3px;
  background: #0b0a0a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  transition: opacity .1s linear;
}
/* Fade Squarespace buttons slightly on hover */
.sqs-button:hover { opacity: .8; text-decoration: none; }
/* Render large calls to action as square uppercase buttons */
.sqs-button-large {
  padding: 25px 46px;
  border-radius: 0;
  background: #272727;
  font: 600 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Live sets the Salesforce Features ticks in 13px */
.page-home #features-section p > span, .page-features p > span, #our-features-section p > span { font-size: 13px; }
/* Live leaves an empty 18px caption under both Salesforce logos */
.page-home #we-love-salesforce-section img { width: auto; padding-bottom: 18px; }

/* Example videos: poster with a play button until clicked (see site.js) */
.video-play { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-play img { display: block; width: 100%; }
.video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  background: url("/img/play-button.png") center / 48px no-repeat;
}
/* Like live, retina screens get the 2x icon drawn at 33px */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 1.5dppx) {
  /* Swap in the 2x play icon on high-density screens */
  .video-play::after { background-image: url("/img/play-button@2x.png"); background-size: 33px; }
}
/* Size standard video embeds to the live 16:10 frame */
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
/* Welcome embeds its video directly at 16:9 */
.page-welcome-to-formyoula .video-frame { aspect-ratio: 16 / 9; }
.survey-frame { width: 100%; border: 0; }
/* Like live, the survey sits inline in a 1400px frame at every width */
.survey-frame { height: 1400px; }
/* Live embeds the NPS survey in a shorter 700px frame */
.page-nps .survey-frame { height: 700px; }
.calendly-inline-widget { min-width: 320px; height: 680px; }

/* Image galleries */
.gallery { display: flex; }
/* Divide gallery rows evenly into square linked tiles */
.gallery a { display: flex; flex: 1; align-items: center; min-width: 0; aspect-ratio: 1; }
.gallery img { display: block; width: 100%; }
/* Live pads the Offline Media Capture thumbnails 3px apart */
.gallery-padded { margin-right: -3px; }
/* Add the live 3px gutter inside padded galleries */
.gallery-padded a { padding: 0 3px 3px 0; }

/* Live shows the FAQ email addresses as plain text */
:is(#faq-section, #faqs-section, .page-faq) a[href^="mailto:"] { color: inherit; }
/* Live floats some FAQ answers, which lifts "What if I'm not happy?" by 17px */
:is(#faq-section, .page-faq) .col > .row:nth-of-type(2) > .col:first-child { margin-top: -17px; }

/* Testimonials: Squarespace quote blocks */
blockquote {
  margin: 0;
  padding: 17px 17px 0;
  font: italic 27px/1.35em Georgia, serif;
  color: #aaa;
  text-align: center;
}
/* Show the decorative opening quote above testimonial text */
blockquote > span:first-child { display: block; font-size: 2em; color: rgba(170, 170, 170, .5); }
/* Hide the unused closing quote marker */
blockquote > span:last-child { display: none; }
/* Match live's centred italic testimonial attribution */
figcaption { padding: .5em 17px 17px; font: italic 16.875px/36.45px Georgia, serif; color: #aaa; text-align: center; }
/* Join quote text to its attribution without a block gap */
.col > blockquote { margin-bottom: 0; }
/* Join testimonial attribution to the quote above */
.col > figcaption { margin-top: 0; }
/* The Salesforce landing page sets its quote blocks in a 1012px column, 17px further in than the home page */
@media (min-width: 641px) {
  /* Inset Salesforce quotes one extra grid gutter on desktop */
  .page-salesforce-getting-started :is(blockquote, figcaption) { padding-left: 34px; padding-right: 34px; }
  /* Add the desktop Salesforce quote's top inset */
  .page-salesforce-getting-started blockquote { padding-top: 34px; }
  /* Add the desktop Salesforce attribution's bottom inset */
  .page-salesforce-getting-started figcaption { padding-bottom: 34px; }
}
/* Tighten Salesforce quote padding on phones */
@media (max-width: 640px) {
  /* Use the live phone inset around Salesforce quotes */
  .page-salesforce-getting-started blockquote { padding: 20px 20px 0; }
  /* Complete the live phone inset below Salesforce attributions */
  .page-salesforce-getting-started figcaption { padding: .5em 20px 20px; }
}

/* Pricing: price, button and block spacing as on live */
.page-home #features-section, .page-home #pricing-section, .page-features .col, .page-pricing .col { text-align: center; }
/* Centre price figures wherever pricing blocks appear */
.price-inside { text-align: center; }
/* Join price figures to their breakdown text */
.col > .price-inside { margin-bottom: 0; }
/* Lift the currency symbol beside the amount */
.price-super { position: relative; top: -33px; font-size: 18px; }
/* Match the live large, light price amount */
.price-amt { font-size: 63px; font-weight: 300; line-height: 44px; }
.price-sub { font-size: 12px; }
/* Set live spacing and type for price breakdowns */
.col > .price-breakdown { margin: 11px 0 45px; font-size: 11px; text-align: center; }
/* Live sets the custom-plan lines in 16px */
.page-home #pricing-section .span-12 > p > span, .page-pricing .span-12 > p > span, #our-pricing-section .span-12 > p > span { font-size: 16px; }

/* Forms: full-width grey Squarespace fields with a native button */
.form-fields { text-align: center; }
/* Stack form labels and align them to the field edge */
.site-form label { display: block; margin: 0 0 18px; line-height: normal; text-align: left; }
/* Live sets "(required)" 1ex after its label: the space plus 4.5px here, plus 3px in the 12px name captions */
.req { margin-left: 4.5px; font-size: 12px; opacity: .7; }
/* Give every form control the full-width live field treatment */
.site-form input, .site-form select, .site-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid #a9a9a9;
  background-color: #fafafa;
  color: #000;
  font: inherit;
}
/* Draw the live dropdown arrow without native select chrome */
.site-form select {
  appearance: none;
  padding-right: 28px;
  background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath fill='%23666' d='M.44 1.5 1.56.5 9 8.87 16.44.5 17.56 1.5 9 11.13z'/%3E%3C/svg%3E") right 9px center no-repeat;
}
/* Fix text areas to the live 100px height */
.site-form textarea { height: 100px; }
/* Keep first and last name fields side by side */
.name-row { display: flex; gap: 10px; }
/* Live's 12px name captions sit on an 18px line */
.name-row > span { flex: 1; font-size: 12px; }
/* Preserve the live caption line box above name fields */
.name-row > span::before { content: ""; font-size: 18px; }
/* Tighten required markers inside name captions */
.name-row .req { margin-left: 3px; }
/* Align name fields directly beneath their captions */
.name-row input { margin-top: 0; font-size: 18px; }
/* Restore the live native-looking form submit button */
.site-form button { all: revert; font: 18px Arial, Helvetica, sans-serif; }
.form-thanks { padding: 12px 0 24px; text-align: center; }

/* Legal page content remains left aligned without overriding the shared footer */
.page-legal main :is(h1, h2, h3, p, li) { text-align: left; }
/* Long text blocks (legal pages, the success story) use Squarespace's text spacing: headings 1.5em below
   the previous paragraph, 24px under a heading, lists 18px apart and list paragraphs 9px apart */
:is(.page-legal, .page-our-customer-success-stories) .col > :is(h2, h3) { margin-top: 1.5em; }
/* Keep stacked long-form headings 24px apart */
:is(.page-legal, .page-our-customer-success-stories) .col > :is(h1, h2) + h3 { margin-top: 24px; }
/* Remove leading space when a long-form column starts with a heading */
:is(.page-legal, .page-our-customer-success-stories) .col > :is(h2, h3):first-child { margin-top: 0; }
/* Match live list indents and vertical rhythm */
.col > ul, .col > ol { margin-top: 18px; margin-bottom: 18px; padding-left: 40px; }
/* Keep list-item paragraphs on a compact rhythm */
li > p { margin: 9px 0; }
/* A paragraph that starts a new Squarespace text block on live sits a block gap (34px) below the last one */
.col > p.block-start { margin-top: 34px; }
/* Success story: live's blog post layout, a 648px text column with a centred header, the author line and
   comment count hidden, and the quote in a full-width quote block */
.story-header { max-width: 648px; margin: 0 auto 54px; text-align: center; }
/* Give the success-story title live's vertical spacing */
.story-header h1 { margin: 24px 0; }
.story-header h1 a { color: inherit; text-decoration: none; }
/* Render the story category as tracked uppercase metadata */
.story-header .story-meta:first-child { margin: 0; color: #999; font: 500 16px/25.6px Raleway, Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
/* Hide author and comment metadata omitted on live */
.story-author, .story-comments { display: none; }
/* Expand the success-story quote into a padded full-width block */
.page-our-customer-success-stories .col > blockquote { padding: 34px 34px 51px; }
/* Compact the success-story header and quote on phones */
@media (max-width: 640px) {
  /* Match the success-story quote's phone insets */
  .page-our-customer-success-stories .col > blockquote { padding: 38px 20px 36px; }
  /* Reduce space below the story header on phones */
  .story-header { margin-bottom: 18px; }
  /* Tighten the story title vertically on phones */
  .story-header h1 { margin: 17px 0; }
}
/* Keep success-story prose in a centred desktop column */
@media (min-width: 641px) {
  /* Inset long-form story content to the live 648px measure */
  .page-our-customer-success-stories .page > .row > .col > :is(h3, p, ol, ul) { margin-left: 182px; margin-right: 182px; }
}

/* Footer: live Squarespace footer */
.site-footer {
  padding: 68px max(34px, calc(50% - 506px)) 85px;
  background: var(--header);
  color: #fff;
  font-size: 15.84px;
  line-height: 28.8px;
  text-align: center;
}
/* Remove default paragraph gaps inside the footer */
.site-footer p { margin: 0; }
/* Keep footer links white */
.site-footer a { color: #fff; }
/* Reveal full-white footer underlines on hover */
.site-footer a:hover { text-decoration: none; border-bottom-color: #fff; }
/* Draw the live translucent underline on footer links */
.footer-links a, .footer-links + p a, .fine a { border-bottom: 1px solid rgba(255, 255, 255, .3); }
/* Live shows Back To Top only on tablets and phones */
.site-footer p:first-child { display: none; }
/* Render the footer email as tracked uppercase text */
.site-footer .footer-email { margin-bottom: 21px; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
/* As on live, the footer links are lines of text spaced into columns with non-breaking spaces */
.site-footer .footer-links { margin-bottom: 1em; }
/* Fine print sits in Squarespace's 9-of-10 column, two columns in */
.site-footer .fine {
  width: calc((100% + 34px) * .75 - 34px);
  margin: calc(1em + 34px) 0 0 calc((100% + 34px) / 6);
  text-align: left;
}
/* Live leaves an empty paragraph line above the fine print */
.fine::before { content: "\A"; white-space: pre; }

/* As on live, below 1224px the nav no longer fits beside the logo and drops under it */
@media (min-width: 769px) and (max-width: 1223px) {
  /* Wrap the full navigation beneath the centred logo */
  .nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4.4px; padding: 94px 10px 10px; }
  /* Let both link groups participate in the wrapped nav flow */
  .nav-left, .nav-right { display: contents; }
}

/* Tablets and phones: a menu button and a 50px logo replace the nav */
@media (max-width: 768px) {
  /* Live jumps straight to sections on phones rather than scrolling smoothly */
  html:has(.page-home) { scroll-behavior: auto; }
  /* Disable cloned-bar offsets once the mobile navigation takes over */
  .page-home .index-section { scroll-margin-top: 0; }
  /* Step section headings down slightly on tablets */
  h2 { font-size: 36px; }
  /* Tighten page insets at tablet widths */
  .page { padding: 34px 34px 51px; }

  /* Reduce the tablet header to the compact navigation height */
  .site-header { min-height: 70px; }
  /* Replace desktop links with the compact menu button */
  .nav-toggle {
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    font-size: 0;
    cursor: pointer;
    background: linear-gradient(#fff 0 2px, transparent 0 7px, #fff 0 9px, transparent 0 14px, #fff 0 16px, transparent 0) 0 0 / 22px 16px no-repeat;
  }
  /* Keep the menu button available while its overlay scrolls */
  .nav-open .nav-toggle { position: fixed; z-index: 1; }
  /* Live's close button: the two 22px bars of the menu icon crossed */
  .nav-open .nav-toggle {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath fill='%23fff' transform='rotate(45 9 9)' d='M-2 8h22v2H-2zM8-2h2v22H8z'/%3E%3C/svg%3E") 2px -1px no-repeat;
  }
  /* Shrink the logo to the compact-navigation height */
  .logo img { width: auto; height: 50px; }
  /* As on live, the logo stays put while the open menu scrolls */
  .nav-open .logo { position: fixed; }
  /* Hide the desktop link groups until the mobile menu opens */
  .nav-left, .nav-right { display: none; }
  /* Live centres the links in a 101%-high box padded 100px, so short screens show them 100px down; 1vh less bottom padding stands in for the extra 1% */
  .nav-open .nav {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 100px 0 calc(100px - 1vh);
    background: rgba(28, 135, 217, .97);
  }
  /* Stack both link groups inside the open menu */
  .nav-open .nav-left, .nav-open .nav-right { position: static; display: flex; flex-direction: column; flex-shrink: 0; align-items: stretch; height: auto; gap: 0; }
  /* Centre the first link group vertically from above */
  .nav-open .nav-left { margin-top: auto; }
  /* Centre the second link group vertically from below */
  .nav-open .nav-right { margin-bottom: auto; }
  /* Enlarge and centre links in the open mobile menu */
  .nav-left a, .nav-right a { padding: 12px 0; font-size: 24px; line-height: 24px; text-align: center; }
  /* Hide the desktop cloned bar when compact navigation is active */
  .scroll-nav { display: none; }
  /* Past the hero, live pins the button on a blue square and the menu opens without the scrolled-away logo (see site.js) */
  .scrolled .nav-toggle { position: fixed; background-color: var(--header); background-position: center; }
  /* Hide the scrolled-away logo beside the pinned menu button */
  .scrolled .logo { visibility: hidden; }

  /* Show the Back To Top link on tablets and phones */
  .site-footer p:first-child { display: block; }
  /* Set Back To Top as live's centred uppercase link */
  .site-footer p:first-child a {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 10.5px 14px;
    border: 0;
    font: 500 14px/17.5px Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  /* Centre footer fine print on compact layouts */
  .site-footer .fine { text-align: center; }
}

/* Phones: columns stack and text shrinks, as on live */
@media (max-width: 640px) {
  /* Reduce page titles to the live phone scale */
  h1 { font-size: 34px; }
  /* Reduce section headings to the live phone scale */
  h2 { font-size: 26px; }
  /* Reduce third-level headings to the live phone scale */
  h3 { font-size: 20px; }
  /* Use the live 20px phone gutter and 57px vertical padding */
  .page, .index-section .page { padding: 57px 20px; }
  /* Add a block gap between stacked row items */
  .row { row-gap: 34px; }
  /* Stack every partial-width column on phones */
  .span-1, .span-2, .span-3, .span-4, .span-5, .span-6,
  .span-7, .span-8, .span-9, .span-10, .span-11 { width: 100%; }
  /* Tighten divider spacing to one phone block gap */
  .col > hr { margin: 34px 0; }
  /* Remove spacer-only columns once the grid stacks */
  .col:has(> .spacer:only-child) { display: none; }
  /* Allow gallery tiles to wrap on phones */
  .gallery { flex-wrap: wrap; }
  /* Show two gallery tiles per phone row */
  .gallery a { flex: 0 0 50%; }
  /* Compact large calls to action for phone widths */
  .sqs-button-large { padding: 21px 34px; font-size: 15px; }
  /* On phones the floated FAQ answers lead their pair and sit 17px in */
  :is(#faq-section, .page-faq) .col > .row:nth-of-type(1) > .col:first-child { padding-right: 34px; }
  /* Cancel the desktop FAQ overlap when answers stack */
  :is(#faq-section, .page-faq) .col > .row:nth-of-type(2) > .col:first-child { margin-top: 0; }
  /* Lead alternating FAQ pairs with their right-hand answer */
  :is(#faq-section, .page-faq) .col > .row:nth-of-type(2) > .col:last-child,
  :is(#faq-section, .page-faq) .col > .row:nth-of-type(4) > .col:last-child { order: -1; padding-left: 34px; }
  /* Reorder the Salesforce landing page's split first pair and later pairs */
  #faqs-section .col > .row:nth-of-type(1) > .col:last-child,
  #faqs-section .col > .row:nth-of-type(2) > .col:last-child,
  #faqs-section .col > .row:nth-of-type(3) > .col:last-child,
  #faqs-section .col > .row:nth-of-type(5) > .col:last-child { order: -1; padding-left: 34px; }
  /* Live floats the appointment FAQ blocks too: on phones the right-hand block of most pairs leads, 17px in */
  .page-appointment .span-12 > .row:not(:nth-child(10)) > .col:last-child { order: -1; padding-left: 34px; }
  /* Indent the final appointment FAQ's left-hand block */
  .page-appointment .span-12 > .row:nth-child(10) > .col:first-child { padding-right: 34px; }
  /* Reduce generic quote padding on phones */
  blockquote { padding: 3px 3px 0; }
  /* Reduce generic quote-attribution padding on phones */
  figcaption { padding: .5em 3px 3px; }
  /* Restore inset top padding for nested phone quotes */
  .col .col > blockquote { padding-top: 20px; }
  /* Restore inset bottom padding for nested attributions */
  .col .col > figcaption { padding-bottom: 20px; }

  /* Restore the taller live header on phones */
  .site-header { min-height: 94px; }
  /* Drop the phone menu button and logo 20px from the top */
  .nav-toggle, .logo { top: 20px; }
  /* Align the phone menu button with the 20px page gutter */
  .nav-toggle { left: 20px; }

  /* Reframe the home hero artwork for narrow screens */
  .page-home .hero { background-position: 51.46% bottom; }
  /* Match live's tall phone hero */
  .page-home .hero .page { padding: 153px 34px; }
  /* Enlarge the home hero heading on phones */
  .page-home .hero .col > h2 { margin-bottom: 4px; font-size: 26px; }
  /* Enlarge centred home hero copy on phones */
  .page-home .hero .col > .text-align-center { font-size: 26px; }

  /* Use live's compact phone footer padding */
  .site-footer { padding: 20px 20px 37px; }
  /* Leave a half-gap above phone footer links */
  .footer-links { padding-top: 17px; }
  /* Let phone fine print fill and centre in the footer */
  .site-footer .fine { width: auto; margin-left: 0; }
}

/* Centre the Salesforce trial call to action */
.sf-button-row { text-align: center; }
/* Reproduce the green Salesforce trial button */
.sf-trial-button {
  display: inline-block;
  padding: 15px 35px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #5cb85c;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.42857143;
  white-space: nowrap;
  vertical-align: middle;
}
/* Keep the Salesforce trial button unadorned on hover */
.sf-trial-button:hover { text-decoration: none; }