@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/fraunces-latinext-600.woff2') format('woff2');
  unicode-range: U+0100-017F;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-latinext-400.woff2') format('woff2');
  unicode-range: U+0100-017F;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/inter-latinext-600.woff2') format('woff2');
  unicode-range: U+0100-017F;
}


.demos .demo-grid {grid-template-columns: repeat(var(--tiles, 3), minmax(0, 1fr));}

.demos .demo-tile {position: relative;}

@media (min-width: 901px) and (max-width: 1099px) {
  .demos .demo-grid[style*="--tiles: 4"] {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 900px) {
  
  .demos .demo-grid {grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 22rem);
    gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    
    
    padding-block: 1rem 1.75rem; margin-block-end: -.5rem;
    padding-inline: .5rem 1.25rem; margin-inline: -.5rem -1.25rem; scroll-padding-inline-start: .5rem;}
  .demos .demo-tile {scroll-snap-align: start;}
  
  @media (hover: none) {.demos .demo-tile:active {transform: none;}}
  
  .demos .demo-shot::after {display: none;}
}


[data-theme="yusr"] .testimonial {
  --tm-muted: #b6c0d2; 
  background:
    radial-gradient(58rem 30rem at 82% -10%, color-mix(in srgb, var(--color-accent, #c9a45c) 10%, transparent), transparent 60%),
    linear-gradient(160deg, var(--color-hero-bg, #0a1f3c) 0%, var(--color-band-bg, #12315e) 100%);
  color: var(--color-band-ink, #f2f5fa);
}
.testimonial h2 {color: #fff; max-width: 24ch;}
.testimonial .tm-results {list-style: none; margin: clamp(24px, 4vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0;}
.testimonial .tm-result {border-top: 1px solid rgba(255, 255, 255, .18); padding: 18px 0 20px;
  display: grid; grid-template-columns: 5.5rem 1fr;  column-gap: 18px; align-items: baseline; min-width: 0;}
.testimonial .tm-num {font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); letter-spacing: -.02em;
  color: var(--color-accent-lift, #c9a45c); font-variant-numeric: tabular-nums;}
.testimonial .tm-tick {align-self: start; display: inline-flex; align-items: center; height: 1em;}
.testimonial .tm-tick svg {width: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); height: auto;}
.testimonial .tm-what {display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.testimonial .tm-what strong {font-weight: 600; color: #fff; font-size: 1.05rem; line-height: 1.3;}
.testimonial .tm-what > span {font-size: .95rem; line-height: 1.5; color: var(--tm-muted);}
.testimonial .kb {white-space: nowrap; font-variant-numeric: tabular-nums;}
@media (min-width: 760px) {
  .testimonial .tm-results {grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px);}
  .testimonial .tm-result {grid-template-columns: 1fr; row-gap: 12px; align-items: start;}
}
.testimonial .tm-quote {margin: clamp(28px, 4vw, 44px) 0 0; padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .18); max-width: 44rem;}
.testimonial blockquote {margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.7;
  color: var(--color-band-ink, #f2f5fa); text-wrap: pretty;}
.testimonial blockquote p {margin: 0; text-indent: -.42em;} 
.testimonial figcaption {margin-top: 22px; display: flex; align-items: center; gap: 14px; min-width: 0;}
.testimonial .tm-logo {width: 64px; height: 64px; border-radius: 12px; background: #5a8fb4; 
  display: grid; place-items: center; flex: none;}
.testimonial .tm-logo img {width: 48px; height: auto; display: block;}
.testimonial .tm-who {display: flex; flex-direction: column; min-width: 0; font-size: .95rem; line-height: 1.4;}
.testimonial .tm-role {color: #fff; font-weight: 600;}
.testimonial .tm-who a {align-self: flex-start; color: var(--color-accent-lift, #c9a45c);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  padding-block: .6rem; margin-block: -.35rem; overflow-wrap: anywhere;
  transition: text-decoration-thickness .16s var(--ease-out, ease-out);}
.testimonial .tm-note {margin: 18px 0 0; max-width: 44rem; font-size: .9rem; line-height: 1.5; color: var(--tm-muted);}
.testimonial .tm-who a:focus-visible {outline: 2px solid var(--color-accent-lift, #c9a45c); outline-offset: 3px; border-radius: 3px;}
@media (hover: hover) and (pointer: fine) {.testimonial .tm-who a:hover {text-decoration-thickness: 2px;}}



.site-header .header-phone-link {display: inline-flex; align-items: center; min-height: 44px; padding: 0 .15rem;
  font-weight: 600; color: var(--color-heading, #0a1f3c); white-space: nowrap; font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-color: var(--color-primary, #8f5d00);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  transition: text-decoration-thickness .16s var(--ease-out, ease-out);}
@media (hover: hover) and (pointer: fine) {.site-header .header-phone-link:hover {text-decoration-thickness: 2.5px;}}
.site-header .header-phone-link:focus-visible {outline: 3px solid var(--color-primary, #8f5d00); outline-offset: 2px; border-radius: 4px;}
@media (max-width: 700px) {
  .site-header .header-phone-link {display: inline-flex; font-size: .95rem;}
}


.hero-ai-line {margin: 1.4rem 0 0; font-size: 1.02rem; line-height: 1.5; max-width: 34rem;
  color: color-mix(in srgb, var(--color-hero-ink, #f2f5fa) 86%, transparent);}
.hero-ai-line a {color: var(--color-accent, #f2b33d); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; padding-block: .75rem; margin-block: -.75rem;
  transition: text-decoration-thickness .16s var(--ease-out, ease-out);}
@media (hover: hover) and (pointer: fine) {.hero-ai-line a:hover {text-decoration-thickness: 2px;}}
.hero-ai-line a:focus-visible {outline: 2px solid var(--color-accent, #f2b33d); outline-offset: 3px; border-radius: 3px;}


.split-inner {display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: start;}
.split-copy, .split-media, .split-note {min-width: 0;}
.split-copy h2 {max-width: 22ch;}
.split-label {margin: 0 0 .75rem; font-weight: 600; color: var(--color-heading, #0a1f3c); max-width: 40rem;}
.split-p {margin: 1rem 0 0; max-width: 36rem; color: var(--color-ink, #16213a); font-size: 1.05rem; line-height: 1.6;}
.split-bullets {max-width: 38rem;}
.split-lines {list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 40rem;}
.split-lines li {padding: 1rem 0; border-top: 1px solid var(--color-border, #d9dee8); line-height: 1.6;}
.split-lines li:last-child {border-bottom: 1px solid var(--color-border, #d9dee8);}
.split-lines strong {display: block; font-family: var(--font-display); font-weight: var(--display-weight, 600);
  font-size: 1.2rem; color: var(--color-heading, #0a1f3c); margin-bottom: .2rem;}
.split-aside {margin-top: 1.75rem; padding: 1.25rem 1.35rem; max-width: 36rem; background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border, #d9dee8); border-radius: var(--radius, 14px);}
.split-aside p {margin: 0;}
.split-aside .split-ctas {margin-top: 1rem;}
.split-small {margin-top: .75rem !important; font-size: .9rem; line-height: 1.5; color: var(--color-muted, #4e5a72);}
.split-lead-in {margin: 1.5rem 0 0; font-weight: 600; color: var(--color-heading, #0a1f3c);}
.split-ctas {display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem;}
.split-lead-in + .split-ctas {margin-top: .75rem;}
.split-media {margin: 0;}
.split-media img {display: block; width: 100%; height: auto; border-radius: var(--radius, 14px);
  border: 1px solid var(--color-border, #d9dee8); background: #fff; box-shadow: 0 18px 40px -28px rgba(10, 31, 60, .45);}
.split-media figcaption {margin-top: .6rem; font-size: .9rem; line-height: 1.45; color: var(--color-muted, #4e5a72);}
.split-note {margin: 0; max-width: 36rem; font-size: .98rem; line-height: 1.6; color: var(--color-muted, #4e5a72);}
.split-note a {margin-right: .9rem; padding-block: .45rem; font-weight: 600; white-space: nowrap;
  color: var(--color-primary, #8f5d00); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;}
.split-note a::after {content: " →";}
@media (hover: hover) and (pointer: fine) {.split-note a:hover {text-decoration-thickness: 2px;}}
@media (min-width: 901px) {
  .split-inner {grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "copy media" "note media";
    grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);}
  .split-copy {grid-area: copy;} .split-media {grid-area: media; align-self: center;} .split-note {grid-area: note; margin-top: 1.4rem;}
  .split-reverse .split-inner {grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-areas: "media copy" "media note";}
  .split-solo .split-inner {grid-template-columns: minmax(0, 46rem); grid-template-areas: "copy" "note";}
}
@media (max-width: 900px) {
  .split-note {margin-top: -.25rem;}
}
@media (max-width: 520px) {
  .split-ctas .btn {flex: 1 1 100%; justify-content: center; text-align: center;}
}


@media (min-width: 901px) {
  
  [data-theme="yusr"] #build .card-grid.cols-1 .service-card.has-photo {display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(2rem, 1rem + 3vw, 3.5rem);}
  [data-theme="yusr"] #build .card-grid.cols-1 .service-card.has-photo > .card-photo {grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0;}
  [data-theme="yusr"] #build .card-grid.cols-1 .service-card.has-photo > :not(.card-photo) {grid-column: 2;}
  [data-theme="yusr"] #build .card-grid.cols-1 .service-card.has-photo > h3 {grid-row: 2;}
  [data-theme="yusr"] #build .card-grid.cols-1 .service-card.has-photo > p {grid-row: 3;}
  [data-theme="yusr"] #build .card-grid.cols-1 .service-card.has-photo > .card-link {grid-row: 4; margin-top: .9rem; justify-self: start;}
}


[data-layout="ai-tools"] .hero-premium h1 {font-size: clamp(2.1rem, 1.4rem + 1.6vw, 2.6rem); max-width: 32ch;}

@media (min-width: 901px) {
  #invoice-chaser.split-reverse .split-inner {grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);}
  #invoice-chaser .split-media {align-self: start; margin-top: 2.6rem;}   
}



:root {--hw-hdr: calc(4.25rem + 1px);}
.hero-wall {position: relative; overflow: clip; padding: 0; color: var(--color-hero-ink, #f2f5fa);
  margin-top: calc(-1 * var(--hw-hdr));
  background: radial-gradient(70% 80% at 85% 30%, #17396b 0%, #0a1f3c 70%);}
.hero-wall .container {width: min(100% - 2.5rem, 90rem);}
.hero-wall h1 {color: var(--color-hero-ink, #f2f5fa); font-weight: 600; margin: 0; text-wrap: balance;}
.hero-wall .lead {opacity: 1; color: #d5deeb; margin: 0;}
.hero-wall .hero-ai-line {text-wrap: pretty;}
.hero-wall .hero-ai-line a {color: inherit; font-weight: 400; text-decoration-thickness: 1.5px; text-underline-offset: 4px;}
.hero-wall .hero-ai-line a:focus-visible {outline-color: var(--color-accent, #f2b33d);}
.hw-caption {margin: 0; font-size: .8125rem; line-height: 1.4; color: #c3cfe2;}
.hw-card {display: block; overflow: hidden; border-radius: 12px; background: #fff; text-decoration: none; color: inherit;}
.hw-card img {display: block; width: 100%; height: auto; max-width: none;}
.hw-card:focus-visible {outline: 3px solid var(--color-accent, #f2b33d); outline-offset: 4px;}

@media (min-width: 901px) {
  .hero-wall {display: flex; flex-direction: column; height: clamp(40rem, 100svh, 75rem);}
  
  .hw-wall {position: absolute; inset: 0; container-type: size; pointer-events: none;}
  
  .hw-wall .hw-card {--hw-u: min(1cqh / 9, 1cqw / 14.4);
    
    --hw-r: min(100cqw, 50cqw + 48.5rem);}
  
  .hw-wall:has(.hw-card:focus-visible) {z-index: 3;}
  .hw-wall .hw-card {position: absolute; pointer-events: auto;
    left: calc(var(--hw-r) - (880 - var(--x)) * var(--hw-u));
    
    top: max(var(--hw-hdr) + .75rem, var(--y) * var(--hw-u));
    width: calc(var(--w) * var(--hw-u)); border-radius: calc(12 * var(--hw-u));
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .75);}
  .hw-chrome {display: flex; gap: calc(6 * var(--hw-u)); align-items: center; height: calc(22 * var(--hw-u));
    padding-left: calc(10 * var(--hw-u)); background: #e9edf3;}
  .hw-chrome i {display: block; width: calc(8 * var(--hw-u)); height: calc(8 * var(--hw-u)); border-radius: 50%; background: #c3cad6;}
  
  .hw-film {position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(10, 31, 60, .98) 0%, rgba(10, 31, 60, .94) max(45%, 46rem),
        rgba(10, 31, 60, .35) max(66%, 60rem), rgba(10, 31, 60, .10) 100%),
      linear-gradient(to top, rgba(10, 31, 60, .85) 0%, rgba(10, 31, 60, 0) 30%);}
  .hw-inner {position: relative; z-index: 1; pointer-events: none; flex: 1;}
  .hw-copy {pointer-events: auto; max-width: 57rem;
    padding-top: calc(var(--hw-hdr) + clamp(4rem, 13.8svh, 8rem));}
  
  .hero-wall h1 {font-size: clamp(3rem, 1rem + 4.2vw, 4.75rem); line-height: 1; letter-spacing: -.025em;}
  .hw-line {display: block;}
  .hero-wall .lead {margin-top: 1.625rem; max-width: 35rem; font-size: 1.1875rem; line-height: 1.55;}
  
  
  .hw-bar {position: relative; z-index: 4; border-top: 1px solid rgba(242, 245, 250, .16);
    background: rgba(10, 31, 60, .82);}
  .hw-bar-inner {position: relative; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 1rem 2rem; min-height: 7rem; padding-block: 1.25rem;}
  .hero-wall .hero-ai-line {order: -1; margin: 0; max-width: none; font-size: 1.0625rem; color: var(--color-hero-ink, #f2f5fa);}
  .hero-wall .cta-row {margin: 0; display: flex; gap: .75rem; flex-wrap: wrap;}
  .hw-caption-desk {position: absolute; right: 0; bottom: calc(100% + 1rem); padding: 4px 10px; border-radius: 6px;
    background: rgba(10, 31, 60, .9);}
  .hw-peek-wrap {display: none;}
  
  body .yd-chat-launch {transition: transform 160ms var(--ease-out, ease-out), box-shadow 160ms var(--ease-out, ease-out),
    opacity 160ms var(--ease-out, ease-out), visibility 0s linear 0s, translate 0s linear 0s;}
  body[data-launch-pos="raised"] .yd-chat-launch {translate: 0 calc(-1 * var(--hw-raise, 0px));}
  body[data-launch-hide] .yd-chat-launch {opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 100ms var(--ease-out, ease-out), visibility 0s linear 100ms, translate 0s linear 0s;}
  
  @media (hover: hover) and (pointer: fine) {
    .hw-wall .hw-card {transition: translate 200ms var(--ease-out, ease-out), box-shadow 200ms var(--ease-out, ease-out);}
    .hw-wall .hw-card:hover {translate: 0 -3px; box-shadow: 0 48px 90px -40px rgba(0, 0, 0, .85);}
  }
  .hw-wall .hw-card:active {translate: 0 -1px;}
}

@media (max-width: 900px) {
  .hw-wall, .hw-film, .hw-caption-desk {display: none;}
  
  .hero-wall {--hw-card-w: min(100vw - 3.5rem, 26rem); display: flex; flex-direction: column; padding-bottom: 2.5rem;
    background: radial-gradient(90% 60% at 80% 85%, #17396b 0%, #0a1f3c 70%);}
  .hw-copy {padding-top: calc(var(--hw-hdr) + 2rem);}
  .hero-wall h1 {font-size: clamp(2.4rem, 1rem + 7.2vw, 2.75rem); line-height: 1.02; letter-spacing: -.02em;}
  .hw-line {display: inline;}
  .hero-wall .lead {margin-top: .875rem; font-size: 1rem; line-height: 1.5; max-width: 34rem;}
  .hw-bar-inner {display: flex; flex-direction: column; align-items: stretch;}
  .hero-wall .cta-row .btn {text-align: center;}
  .hero-wall .cta-row {margin-top: 1.25rem; display: grid; gap: .625rem; max-width: 34rem;}
  .hero-wall .hero-ai-line {margin-top: .875rem; font-size: .9375rem;}
  .hw-peek-wrap {padding-top: clamp(2rem, 100svh - 41rem, 4rem);}
  .hw-peek .hw-caption {margin: 0 0 .75rem; font-size: .75rem;}
  .hw-card-phone {width: var(--hw-card-w); margin-inline: .5rem; transform: rotate(-2deg);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);}
}


@media (min-width: 901px) and (max-width: 1279px) {
  .hw-film {background: linear-gradient(90deg, rgba(10, 31, 60, .98) 0%, rgba(10, 31, 60, .94) 37rem,
        rgba(10, 31, 60, .35) 72%, rgba(10, 31, 60, .10) 100%),
      linear-gradient(to top, rgba(10, 31, 60, .85) 0%, rgba(10, 31, 60, 0) 30%);}
}


@media (min-width: 1280px) {
  .hero-wall .container, .site-header.header-over .container {width: min(100% - 7rem, 90rem);}
}


.site-header .brand-logo-over {display: none;}

.site-header.header-over {transition: box-shadow .2s var(--ease-out, ease-out);}
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) {background: transparent; border-bottom-color: transparent;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;}
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .brand-logo:not(.brand-logo-over) {display: none;}
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .brand-logo-over {display: block;}
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .site-nav a {color: #f2f5fa; opacity: .92;}
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .site-nav a:hover {color: #fff; opacity: 1;}
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .header-phone-link {color: #f2f5fa; text-decoration-color: currentColor;}
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .header-phone-link:focus-visible,
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .site-nav a:focus-visible,
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .brand:focus-visible,
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .nav-toggle:focus-visible {outline: 3px solid var(--color-accent, #f2b33d); outline-offset: 2px;}
.site-header.header-over:not(.scrolled):not(:has(.site-nav.open)) .nav-toggle span {background: #f2f5fa;}