/* ==========================================================================
   taf-sales.css: the sales look, 5 Nov 2026

   Reece picked these parts from the mockup canvas "TAF Website Mockup":
   the home page apps section and reviews section (home version 2), and the
   app page design (Simple Signature first). The header, the footer, the logo
   and the mountain pictures stay as they are in taf-docs.css.

   Only pages that use the sales look load this file: the home page and
   the four app pages. taf-sales.js, beside it, runs the reveal on scroll,
   the tagline, the review filter and the four demos. Every part works
   without the script; the script only adds motion and the demos.

   Parts:
     1. Shared: topographic lines, reveal, Salesforce-style scenes
     2. Home: the apps section
     3. Home: the reviews section
     4. Home: the dusk, smooth and tied to the scroll
     5. App page: hero, demo, tagline, benefits, steps, plans, reviews, FAQ
     6. App pages: the Address Verification, Highlighter and List Browse demos
   ========================================================================== */

/* 1. Shared ------------------------------------------------------------- */
.peak-topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.peak-topo ellipse { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.peak-topo--white ellipse { stroke: rgba(255, 255, 255, .08); }
.peak-topo--navy ellipse { stroke: rgba(1, 49, 128, .09); }
.peak-topo--soft ellipse { stroke: rgba(255, 255, 255, .26); }
.peak-topo--blue ellipse { stroke: rgba(1, 89, 232, .10); }

/* Sections fade up once as they come into view. taf-sales.js adds js-rv to
   <html> only when it can run the reveal, so nothing hides without it. */
.js-rv .peak-rv { opacity: 0; transform: translateY(28px); }
.js-rv .peak-rv.is-in { opacity: 1; transform: none; transition: opacity 800ms cubic-bezier(.22, 1, .36, 1), transform 800ms cubic-bezier(.22, 1, .36, 1); }

.peak-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #0159E8; text-decoration: none; }
.peak-go svg { width: 16px; height: 16px; flex: none; fill: currentColor; transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.peak-go:hover { color: #0143AE; }
.peak-go:hover svg { transform: translateX(4px); }
main p a.peak-go { text-decoration: none; }
.peak-go:focus-visible { outline: 3px solid #00C3FF; outline-offset: 2px; border-radius: 4px; }

/* Salesforce-style scenes: what a user sees on the record. System font, like Salesforce. */
.sfx { position: relative; z-index: 1; width: 100%; max-width: 420px; overflow: hidden; text-align: left;
  background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 20px 40px rgba(0, 34, 88, .25);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; line-height: 16px; color: #181818; }
.sfx--wide { max-width: 520px; }
.sfx__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #E5E5E5; font-size: 13px; font-weight: 700; }
.sfx__b { padding: 10px 12px; }
.sfx__b--stack { display: flex; flex-direction: column; gap: 10px; }
.sfx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.sfx-f { padding: 6px 0; border-bottom: 1px solid #EFEFEF; min-width: 0; }
.sfx-l { display: block; font-size: 11px; color: #444444; }
.sfx-v { display: block; font-size: 12.5px; color: #181818; overflow-wrap: anywhere; }
.sfx-link { color: #0176D3; }
.sfx-ok { display: inline-flex; align-items: center; gap: 4px; color: #2E844A; font-weight: 600; }
.sfx-ok svg { width: 14px; height: 14px; fill: currentColor; }
.sfx-lit { background: #CAF200; margin: 0 -6px; padding: 6px; border-radius: 4px; border-bottom-color: transparent; }
.sfx-lit .sfx-l, .sfx-lit .sfx-v { color: #1C2200; }
.sfx-warn { background: #FFE7E5; margin: 0 -6px; padding: 6px; border-radius: 4px; border-bottom-color: transparent; }
.sfx-warn .sfx-l { color: #8C1C13; }
.sfx-warn .sfx-v { color: #5C0F09; }
.sfx-btn { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid #C9C9C9; border-radius: 6px; background: #FFFFFF; color: #0176D3; font-size: 12px; font-weight: 500; }
.sfx-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; background: #2E844A; color: #FFFFFF; font-size: 11px; font-weight: 600; }
.sfx-tag--wait { background: #EEF4FF; color: #014486; }
.sfx-dots { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; }
.sfx-dots::before { content: ""; position: absolute; left: 10%; right: 10%; top: 7px; height: 2px; background: #0176D3; }
.sfx-dot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; line-height: 12px; color: #444444; }
.sfx-dot i { width: 16px; height: 16px; border-radius: 50%; background: #0176D3; border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px #0176D3; }
.sfx-dot:last-child i { background: #2E844A; box-shadow: 0 0 0 1px #2E844A; }
.sfx-dot.is-wait i { background: #FFFFFF; box-shadow: 0 0 0 1px #C9C9C9; }
.sfx-sig { border-bottom: 1px solid #C9C9C9; padding: 2px 0; }
.sfx-sig svg { display: block; width: 100%; height: 46px; }
.sfx-sig path { fill: none; stroke: #181818; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 480; stroke-dashoffset: 0; }
.js-rv .peak-rv .sfx-sig path { stroke-dashoffset: 480; }
.js-rv .peak-rv.is-in .sfx-sig path { animation: peak-draw 1500ms cubic-bezier(.22, 1, .36, 1) 300ms forwards; }
@keyframes peak-draw { to { stroke-dashoffset: 0; } }
.sfx-lb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.sfx-lb__list { border-right: 1px solid #E5E5E5; }
.sfx-lb__i { padding: 8px 12px; border-bottom: 1px solid #EFEFEF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfx-lb__i.is-on { background: #EEF4FF; font-weight: 600; box-shadow: inset 3px 0 0 #0176D3; }
.sfx-lb__d { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sfx-pager { display: inline-flex; align-items: center; border: 1px solid #C9C9C9; border-radius: 6px; overflow: hidden; font-weight: 600; }
.sfx-pager span { display: flex; align-items: center; height: 24px; padding: 0 8px; color: #0176D3; }
.sfx-pager .n { color: #181818; border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; }
.sfx-file { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #E5E5E5; border-radius: 6px; }
.sfx-pdf { flex: none; width: 24px; height: 28px; border-radius: 3px; background: #FE5C4C; color: #FFFFFF; font-size: 8px; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; }

/* 2. Home: the apps section ------------------------------------------- */
#apps.peak-apps2 { position: relative; overflow: hidden; }
#apps.peak-apps2 .taf-wrap > .taf-center { margin-bottom: 56px; }
.peak-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.peak-app { grid-column: span 6; display: flex; flex-direction: column; padding: 8px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 18px 40px rgba(0, 20, 58, .45); transition: transform 500ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms cubic-bezier(.22, 1, .36, 1); }
.peak-app:hover { transform: translateY(-4px); box-shadow: 0 26px 52px rgba(0, 20, 58, .55); }
.peak-app--7 { grid-column: span 7; }
.peak-app--5 { grid-column: span 5; }
.peak-art { position: relative; display: flex; align-items: center; justify-content: center; height: 280px; padding: 28px; border-radius: 16px; overflow: hidden; background: var(--peak-app, #0159E8); }
.peak-app__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 16px 16px; text-align: left; }
.peak-app__name { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -.02em; }
.peak-app__name img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.peak-app__name a { color: #002258; text-decoration: none; }
.peak-app__name a:hover { color: #0159E8; }
.peak-app__text { margin: 0; color: var(--text); }
.peak-app__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.peak-app__foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.peak-app__store { color: var(--text-dim); font-size: 15px; }
@media (max-width: 1100px) {
  .peak-app--7, .peak-app--5 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .peak-bento { grid-template-columns: minmax(0, 1fr); }
  .peak-app, .peak-app--7, .peak-app--5 { grid-column: auto; }
  .peak-art { height: 240px; padding: 16px; }
  .peak-app__name { font-size: 24px; line-height: 32px; }
}
@media (max-width: 480px) {
  .sfx-lb { grid-template-columns: minmax(0, 1fr); }
  .sfx-lb__list { display: none; }
}

/* 3. Home: the reviews section ----------------------------------------- */
#reviews.peak-reviews2 { position: relative; overflow: hidden; }
#reviews.peak-reviews2 > .taf-wrap { position: relative; z-index: 1; display: block; }
.peak-revhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 32px; align-items: end; margin: 0 0 32px; text-align: left; }
.peak-revhead > div { grid-column: span 7; }
.peak-revhead > p { grid-column: span 5; margin: 0; }
.peak-revhead h2 { margin: 8px 0 0; }
.peak-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.peak-filters[hidden] { display: none; }
.peak-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 8px; border-radius: 9999px; border: 1px solid rgba(1, 49, 128, .16); background: #FFFFFF; color: #013180; font: inherit; font-size: 14px; line-height: 20px; font-weight: 800; cursor: pointer; transition: background-color 300ms, border-color 300ms, color 300ms, transform 500ms cubic-bezier(.22, 1, .36, 1); }
.peak-chip--all { padding-left: 16px; }
.peak-chip img { width: 28px; height: 28px; border-radius: 8px; }
.peak-chip:hover { border-color: #0159E8; }
.peak-chip:active { transform: scale(.98); }
.peak-chip[aria-pressed="true"] { background: #002258; border-color: #002258; color: #FFFFFF; }
.peak-chip:focus-visible { outline: 3px solid #00C3FF; outline-offset: 2px; }
.peak-wall { columns: 3; column-gap: 24px; }
.peak-wall--2 { columns: 2; }
.peak-quote { break-inside: avoid; display: flex; flex-direction: column; gap: 16px; margin: 0 0 24px; padding: 28px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 12px 30px rgba(1, 49, 128, .10); }
.peak-quote[hidden] { display: none; }
.peak-quote blockquote { margin: 0; color: #013180; font-size: 17px; line-height: 27px; }
.peak-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; font-weight: 800; color: #002258; }
.peak-quote figcaption small { font-size: inherit; font-weight: 500; color: var(--text-dim); }
.peak-stars { display: flex; gap: 2px; color: #0159E8; }
.peak-stars svg { width: 18px; height: 18px; fill: currentColor; }
.peak-stars .off { color: #C9D8F2; }
.peak-apill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 800; background: var(--peak-app); color: var(--peak-app-ink); }
.peak-apill img { width: 20px; height: 20px; border-radius: 5px; }
.peak-wall__note { margin: 0 0 8px; color: var(--text-dim); font-size: 15px; }
@media (max-width: 1000px) {
  .peak-wall { columns: 2; }
  .peak-revhead { grid-template-columns: minmax(0, 1fr); }
  .peak-revhead > div, .peak-revhead > p { grid-column: auto; }
}
@media (max-width: 680px) {
  .peak-wall, .peak-wall--2 { columns: 1; }
  .peak-quote { padding: 24px; }
}

/* 4. Home: the dusk, smooth and tied to the scroll ----------------------
   Reece, 5 Nov 2026: the fade into the night was choppy. The day now fades
   on a slow ease, mixed in the oklab colour space, which has no muddy or
   bright bands, and a fine grain hides the steps a screen can show. The
   night starts slowly at the join with the reviews, so no edge shows there
   (Reece, 5 Nov 2026: the join looked rough). The
   sky goes dark as the visitor scrolls: --peak-dusk runs from 0 (evening)
   to 1 (night) while the dusk section moves up the screen. Browsers that
   cannot tie an animation to the scroll show the night at once. The
   mountain picture is unchanged: the first layer below is a byte-for-byte
   copy of the picture in taf-docs.css section 33. If the mountains change
   there, copy the new picture here too. */
@property --peak-dusk { syntax: "<number>"; inherits: true; initial-value: 1; }
#reviews.taf-section:has(+ .peak-dusk) {
  background-color: var(--peak-sky);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%20.05%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(180deg in oklab,
      var(--peak-sky) 0%, var(--peak-sky) 50%,
      color-mix(in oklab, #B4CFF7 4%, var(--peak-sky)) 58%,
      color-mix(in oklab, #B4CFF7 16%, var(--peak-sky)) 66%,
      color-mix(in oklab, #B4CFF7 34%, var(--peak-sky)) 74%,
      color-mix(in oklab, #B4CFF7 56%, var(--peak-sky)) 82%,
      color-mix(in oklab, #B4CFF7 77%, var(--peak-sky)) 90%,
      color-mix(in oklab, #B4CFF7 93%, var(--peak-sky)) 96%,
      #B4CFF7 100%);
  background-repeat: repeat, no-repeat;
  background-size: 220px 220px, 100% 100%;
}
.peak-dusk {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20330'%3E%3Cg%20fill%3D'%23FFFFFF'%3E%3Ccircle%20cx%3D'140'%20cy%3D'150'%20r%3D'1.5'%20opacity%3D'0.6'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.6%3B0.21%3B0.6'%20dur%3D'4.2s'%20begin%3D'0s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'310'%20cy%3D'176'%20r%3D'1.2'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'470'%20cy%3D'140'%20r%3D'1.4'%20opacity%3D'0.45'%2F%3E%3Ccircle%20cx%3D'690'%20cy%3D'168'%20r%3D'1.7'%20opacity%3D'0.7'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.7%3B0.24%3B0.7'%20dur%3D'5.0s'%20begin%3D'1.6s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'860'%20cy%3D'146'%20r%3D'1.2'%20opacity%3D'0.45'%2F%3E%3Ccircle%20cx%3D'1010'%20cy%3D'184'%20r%3D'1.5'%20opacity%3D'0.6'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.6%3B0.21%3B0.6'%20dur%3D'3.6s'%20begin%3D'0.8s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'1210'%20cy%3D'150'%20r%3D'1.3'%20opacity%3D'0.55'%2F%3E%3Ccircle%20cx%3D'1350'%20cy%3D'136'%20r%3D'1.1'%20opacity%3D'0.4'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.4%3B0.14%3B0.4'%20dur%3D'4.6s'%20begin%3D'2.4s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'560'%20cy%3D'196'%20r%3D'1.1'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'1290'%20cy%3D'200'%20r%3D'1.5'%20opacity%3D'0.65'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.65%3B0.23%3B0.65'%20dur%3D'5.4s'%20begin%3D'0.3s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'60'%20cy%3D'188'%20r%3D'1.2'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'920'%20cy%3D'206'%20r%3D'1.1'%20opacity%3D'0.55'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.55%3B0.19%3B0.55'%20dur%3D'3.9s'%20begin%3D'3.1s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'240'%20cy%3D'214'%20r%3D'1.0'%20opacity%3D'0.45'%2F%3E%3Ccircle%20cx%3D'1120'%20cy%3D'222'%20r%3D'1.1'%20opacity%3D'0.5'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.5%3B0.17%3B0.5'%20dur%3D'4.8s'%20begin%3D'1.1s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(0%20110)'%3E%3Cpath%20d%3D'M10%20220%20L240%20115%20L470%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M240%20115%20L470%20220%20L291%20220%20L245%20180%20L263%20154%20Z'%20fill%3D'%2308306F'%2F%3E%3Cpath%20d%3D'M320%20220%20L600%2095%20L880%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M600%2095%20L880%20220%20L662%20220%20L606%20172%20L628%20142%20Z'%20fill%3D'%2308306F'%2F%3E%3Cpath%20d%3D'M1180%20220%20L1380%20125%20L1580%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M1380%20125%20L1580%20220%20L1424%20220%20L1384%20184%20L1400%20161%20Z'%20fill%3D'%2308306F'%2F%3E%3Cg%20transform%3D'translate(744.2%20-190.7)%20scale(0.700)'%3E%3Cpath%20d%3D'M470%20278%20L478%20278%20L478%20383%20L472%20391%20L470%20391%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20fill%3D'%23FFFFFF'%3E%3Canimate%20attributeName%3D'd'%20values%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C502%20291%20520%20294%20533%20292%20C543%20289%20558%20293%20581%20297%20L568%20321%20L583%20344%20C560%20345%20543%20349%20531%20350%20C519%20346%20503%20343%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20dur%3D'3s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D'M494%20382%20L459%20502%20L530%20506%20L452%20592%20L538%20687%20Q400%20697%20266%20722%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M496%20380%20L734%20686%20Q630%20683%20538%20687%20L452%20592%20L530%20506%20L459%20502%20Z'%20fill%3D'%230159E8'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M-140%20220%20L80%20170%20L300%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M80%20170%20L300%20220%20L124%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M180%20220%20L420%20160%20L660%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M420%20160%20L660%20220%20L468%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M550%20220%20L760%20180%20L970%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M760%20180%20L970%20220%20L802%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M1160%20220%20L1380%20172%20L1600%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M1380%20172%20L1600%20220%20L1424%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%20.05%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(180deg in oklab,
      #B4CFF7 0,
      color-mix(in oklab, #B2CEF7, #B1CDF6 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.0625),
      color-mix(in oklab, #B0CCF7, #ACC9F5 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.1250),
      color-mix(in oklab, #ABC9F6, #A3C1F2 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.1875),
      color-mix(in oklab, #A3C4F5, #96B6EE calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.2500),
      color-mix(in oklab, #98BDF4, #84A8E7 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.3125),
      color-mix(in oklab, #85B3F2, #6C93DE calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.3750),
      color-mix(in oklab, #6FA8F0, #517CD1 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.4375),
      color-mix(in oklab, #5B9FF0, #3A65BC calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.5000),
      color-mix(in oklab, #4894ED, #2851A3 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.5625),
      color-mix(in oklab, #3581E3, #1A418B calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.6250),
      color-mix(in oklab, #2265CA, #103474 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.6875),
      color-mix(in oklab, #1248A8, #092A61 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.7500),
      color-mix(in oklab, #073483, #052355 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.8125),
      color-mix(in oklab, #022663, #021E4E calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.8750),
      color-mix(in oklab, #011E50, #011B49 calc(var(--peak-dusk) * 100%)) calc(var(--peak-scene) * 0.9375),
      #001A47 var(--peak-scene),
      #001A47 100%);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: right top, 0 0, 0 0;
  background-size: max(100%, 900px) auto, 220px 220px, 100% 100%;
}
@keyframes peak-nightfall { from { --peak-dusk: 0; } to { --peak-dusk: 1; } }
@supports (animation-timeline: view()) {
  .peak-dusk {
    animation: peak-nightfall linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .peak-dusk { animation: none; }
}

/* 5. App page ----------------------------------------------------------- */
.peak-appid { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.peak-appid img { width: 48px; height: 48px; border-radius: 12px; }
.peak-appid b { display: block; color: #002258; font-weight: 800; }
.peak-appid small { display: block; color: var(--text-dim); font-size: 14px; }
.peak-proof { align-self: center; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 16px 40px rgba(1, 49, 128, .14); text-align: left; }
.peak-proof blockquote { margin: 0; color: #002258; font-size: 19px; line-height: 29px; font-weight: 800; }
.peak-proof p { margin: 0; color: var(--text-dim); font-size: 14px; }
.peak-proof .taf-pill { width: fit-content; }
.taf-btn.peak-btn-lime { background: #CAF200; border-color: #CAF200; color: #013180; }
.taf-btn.peak-btn-lime:hover { background: #DDFF4D; border-color: #DDFF4D; color: #013180; }
.peak-reccol__label { padding: 4px 4px 12px; }
.peak-rec__fname { font-weight: 600; }

/* The demo: a phone with a real signature pad, and the record it fills in. */
.peak-demo { position: relative; overflow: hidden; }
.peak-demo > .taf-wrap { position: relative; z-index: 1; }
.peak-demo[hidden] { display: none; }
.peak-stage { padding: 8px; border-radius: 24px; background: var(--peak-sky); border: 1px solid #DCE4F0; }
.peak-stage__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.peak-phonecol { grid-column: span 5; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 24px; border-radius: 16px; background: #FFFFFF; border: 1px solid #DCE4F0; }
.peak-phonecol__label { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0159E8; }
.peak-phone { width: 100%; max-width: 320px; border-radius: 40px; border: 8px solid #0B0C0E; background: #0B0C0E; box-shadow: 0 2px 4px rgba(0, 34, 88, .08), 0 24px 56px rgba(0, 34, 88, .22); }
.peak-screen { display: flex; flex-direction: column; gap: 16px; min-height: 540px; padding: 24px 16px 16px; border-radius: 32px; background: #FFFFFF; color: #0B0C0E; overflow: hidden; }
.peak-screen__head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid #E4E7EC; }
.peak-screen__k { margin: 0; font-size: 12px; line-height: 16px; color: #566173; }
.peak-screen__v { margin: 0; font-size: 14px; line-height: 20px; font-weight: 800; color: #0B0C0E; }
.peak-screen__title { font-size: 18px; line-height: 26px; }
.peak-screen__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.peak-agree { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-top: 12px; font-size: 14px; line-height: 20px; color: #0B0C0E; cursor: pointer; }
.peak-agree input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #0159E8; }
.peak-agree input:focus-visible { outline: 3px solid #00C3FF; outline-offset: 2px; }
/* The legal text of the form, and the Electronic Signature Agreement window
   that opens over the phone screen when the signer presses Save Signature. */
.peak-legal { margin: 0; padding-top: 4px; font-size: 14px; line-height: 20px; color: #0B0C0E; }
.peak-screen { position: relative; }
.peak-esa { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 16px; background: rgba(11, 12, 14, .45); animation: peak-fadein 300ms cubic-bezier(.22, 1, .36, 1) both; }
.peak-esa[hidden] { display: none; }
.peak-esa__box { width: 100%; padding: 20px 16px 16px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 16px 40px rgba(0, 20, 58, .35); text-align: center; }
.peak-esa__title { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #E5E5E5; font-size: 16px; line-height: 22px; font-weight: 800; color: #002258; }
.peak-esa__text { margin: 0 0 16px; font-size: 14px; line-height: 20px; color: #3E3E3C; }
.peak-esa__btns { display: flex; justify-content: center; gap: 12px; }
@keyframes peak-fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .peak-esa { animation: none; } }
.peak-pad { position: relative; border: 1px dashed #B8BFC9; border-radius: 12px; background: #F6F7F9; }
.peak-pad canvas { display: block; width: 100%; height: 132px; touch-action: none; cursor: crosshair; border-radius: 12px; }
.peak-pad__line { position: absolute; left: 12px; right: 12px; bottom: 28px; height: 1px; background: #B8BFC9; pointer-events: none; }
.peak-pad__hint { position: absolute; left: 12px; bottom: 8px; font-size: 12px; line-height: 16px; color: #566173; pointer-events: none; }
.peak-screen__btns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; margin-top: auto; }
.peak-screen__btns .taf-btn { width: 100%; justify-content: center; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.peak-screen__btns .taf-btn[disabled] { opacity: .4; cursor: not-allowed; }
@media (max-width: 360px) { .peak-screen__btns .taf-btn { font-size: 13px; } }
.peak-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 8px; text-align: center; }
.peak-done[hidden], .peak-form[hidden] { display: none; }
.peak-form { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.peak-done__mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #4EE54E; color: #08300A; animation: peak-pop 600ms cubic-bezier(.22, 1, .36, 1) both; }
.peak-done__mark svg { width: 28px; height: 28px; fill: currentColor; }
@keyframes peak-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.peak-phonecol__hint { margin: 0; max-width: 320px; font-size: 14px; line-height: 20px; color: var(--text-dim); text-align: center; }
.peak-reccol { grid-column: span 7; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #F3F3F3; border: 1px solid #DCE4F0; padding: 12px; }
.peak-reccol .sfx { max-width: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.peak-rec__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
.peak-rec__id { display: flex; align-items: center; gap: 10px; }
.peak-rec__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #3BA755; color: #FFFFFF; }
.peak-rec__icon svg { width: 20px; height: 20px; fill: currentColor; }
.peak-rec__name { display: block; font-size: 18px; line-height: 24px; font-weight: 700; }
.peak-rec__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 4px 12px 16px; }
.peak-rec__wide { grid-column: span 2; }
.peak-rec__sigbox { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 8px; border: 1px solid #E5E5E5; border-radius: 6px; background: #FFFFFF; }
.peak-rec__sigbox img { max-width: 100%; max-height: 56px; }
.peak-rec__sigbox img[hidden], .peak-rec [hidden] { display: none; }
.peak-rec__act { margin-top: 12px; }
.peak-act { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EFEFEF; }
.peak-act:last-child { border-bottom: 0; }
.peak-act[hidden] { display: none; }
.peak-act__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #EEF4FF; color: #0176D3; }
.peak-act__ico svg { width: 16px; height: 16px; fill: currentColor; }
.peak-rec__new { animation: peak-slidein 700ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes peak-slidein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.peak-stage__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 4px; font-size: 14px; color: var(--text-dim); }
@media (max-width: 1080px) {
  .peak-stage__grid { grid-template-columns: minmax(0, 1fr); }
  .peak-phonecol, .peak-reccol { grid-column: auto; }
}
@media (max-width: 600px) {
  .peak-phonecol { padding: 24px 12px; }
  .peak-rec__body { grid-template-columns: minmax(0, 1fr); }
  .peak-rec__wide { grid-column: span 1; }
  .peak-rec__body .sfx-dot { font-size: 9px; }
}

/* Tagline: the words light up one at a time as the visitor scrolls. */
.peak-tagline { padding: 72px 0 112px; }
.peak-tagline p { margin: 0; max-width: 1216px; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; color: #002258; text-wrap: pretty; }
.js-tag .peak-tw { color: #C9D3E6; transition: color 500ms cubic-bezier(.22, 1, .36, 1); }
.js-tag .peak-tw.is-on { color: #002258; }
.js-tag .peak-tw--hl.is-on { color: #0159E8; }

/* Benefits: picture and text, side by side, turn by turn. */
.peak-zig { display: flex; flex-direction: column; gap: 96px; }
.peak-zrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: center; }
.peak-zrow__text { grid-column: span 5; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.peak-zrow__text h3 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 800; color: #002258; letter-spacing: -.02em; }
.peak-zrow__text p { margin: 0; font-size: 18px; line-height: 28px; color: var(--text); }
.peak-zrow__art { grid-column: span 7; padding: 8px; border-radius: 24px; background: #FFFFFF; border: 1px solid #DCE4F0; }
.peak-zrow--flip .peak-zrow__text { grid-column: 8 / span 5; grid-row: 1; }
.peak-zrow--flip .peak-zrow__art { grid-column: 1 / span 7; grid-row: 1; }
.peak-zin { position: relative; display: flex; align-items: center; justify-content: center; height: 320px; padding: 32px; border-radius: 16px; overflow: hidden; background: var(--peak-sky); }
.peak-tag { display: inline-flex; width: fit-content; padding: 4px 12px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 800; }
.peak-tag--free { background: #4EE54E; color: #08300A; }
.peak-tag--paid { background: #E9F2FE; color: #0143AE; }
.peak-flow { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; }
.peak-doc { width: 190px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 10px; background: #FFFFFF; border: 1px solid #E5E5E5; box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 16px 32px rgba(0, 34, 88, .16); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; line-height: 16px; color: #181818; }
.peak-bar { height: 8px; border-radius: 9999px; background: #E5E5E5; }
.peak-merge { width: fit-content; padding: 2px 8px; border-radius: 6px; background: #EEF4FF; color: #014486; font-weight: 600; }
.peak-arrow { flex: none; width: 24px; height: 24px; color: #566173; fill: currentColor; }
.peak-mail { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9999px; background: #FFFFFF; border: 1px solid #E5E5E5; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 600; color: #181818; box-shadow: 0 8px 20px rgba(0, 34, 88, .14); }
.peak-mail svg { width: 16px; height: 16px; fill: #0176D3; }
.peak-minip { position: relative; z-index: 1; width: 180px; display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; border-radius: 28px; border: 6px solid #0B0C0E; background: #FFFFFF; box-shadow: 0 16px 32px rgba(0, 34, 88, .2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 700; color: #0B0C0E; }
.peak-minip .sfx-sig { border: 1px dashed #B8BFC9; border-radius: 8px; padding: 4px; }
.peak-minip__btn { height: 32px; border-radius: 8px; background: #0159E8; }
.sfx-list { width: 100%; max-width: 520px; }
.sfx-list .sfx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #EFEFEF; }
.sfx-list .sfx-row--head { font-size: 11px; font-weight: 700; color: #444444; background: #F3F3F3; }
.sfx-list .sfx-row:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .peak-zig { gap: 64px; }
  .peak-zrow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .peak-zrow__text, .peak-zrow__art, .peak-zrow--flip .peak-zrow__text, .peak-zrow--flip .peak-zrow__art { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) {
  .peak-zin { height: auto; min-height: 240px; padding: 24px 16px; }
  .peak-flow { flex-direction: column; gap: 12px; }
  .peak-flow .peak-arrow { transform: rotate(90deg); }
  .sfx-list .sfx-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .sfx-list .sfx-row > :first-child { display: none; }
}

/* Steps: a dotted trail from install to the summit flag. */
.peak-steps-wrap { position: relative; }
.peak-trail { display: block; width: 100%; height: auto; margin: 0 0 -8px; overflow: visible; }
.peak-trail path { fill: none; stroke: #0159E8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; }
.peak-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; text-align: left; }
.peak-steps li { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.peak-steps h3 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; color: #002258; }
.peak-steps p { margin: 0; color: var(--text); }
.peak-stepn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #002258; color: #CAF200; font-size: 20px; font-weight: 800; }
@media (max-width: 900px) {
  .peak-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .peak-trail { display: none; }
}

/* Plans: free and paid, lined up. */
.peak-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.peak-plan { display: flex; flex-direction: column; padding: 8px; border-radius: 24px; background: #FFFFFF; border: 1px solid #DCE4F0; text-align: left; }
.peak-plan--paid { border: 2px solid #0159E8; }
.peak-plan__top { display: flex; flex-direction: column; gap: 12px; min-height: 232px; padding: 32px; border-radius: 16px; background: var(--peak-sky); }
.peak-plan--paid .peak-plan__top { background: #E9F2FE; }
.peak-plan__kind { margin: 0; font-size: 20px; line-height: 28px; font-weight: 800; color: #0159E8; }
.peak-plan__what { margin: 0; font-size: 28px; line-height: 36px; font-weight: 800; color: #002258; letter-spacing: -.02em; }
.peak-plan__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: auto; }
.peak-plan ul { list-style: none; margin: 0; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.peak-plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; margin: 0; color: #002258; }
.peak-plan li svg { width: 20px; height: 20px; margin-top: 2px; fill: #0159E8; }
.peak-plan__note { margin: auto 0 0; padding: 0 32px 32px; font-size: 14px; color: var(--text-dim); }
@media (max-width: 900px) {
  .peak-plans { grid-template-columns: minmax(0, 1fr); }
  .peak-plan__top { min-height: 0; }
}
@media (max-width: 600px) {
  .peak-plan__top { padding: 24px; }
  .peak-plan ul { padding: 24px; }
  .peak-plan__note { padding: 0 24px 24px; }
}

/* FAQ: the questions on the left, help on the right. */
.peak-faqgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: start; }
.peak-faqgrid > .taf-acc { grid-column: span 8; }
.peak-faqside { grid-column: span 4; position: sticky; top: calc(var(--header-h, 68px) + 24px); display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 12px 30px rgba(1, 49, 128, .10); text-align: left; }
.peak-faqside h3 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; color: #002258; }
.peak-faqside p { margin: 0; color: var(--text); }
.peak-faqside ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.peak-faqside li { margin: 0; }
@media (max-width: 900px) {
  .peak-faqgrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .peak-faqgrid > .taf-acc, .peak-faqside { grid-column: auto; position: static; }
}

/* Section heads in the sales look: left-aligned, the lede beside the title. */
.peak-head2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 32px; align-items: end; margin: 0 0 48px; text-align: left; }
.peak-head2 > div { grid-column: span 7; }
.peak-head2 > p { grid-column: span 5; margin: 0; }
.peak-head2 h2 { margin: 8px 0 0; }
@media (max-width: 1000px) {
  .peak-head2 { grid-template-columns: minmax(0, 1fr); }
  .peak-head2 > div, .peak-head2 > p { grid-column: auto; }
}

/* App page colour, Reece, 5 Nov 2026: the first app page read a little bland.
   The demo and the tagline sit on the foothills navy, under the hero
   mountains, like the home apps section. The benefit pictures, the plan
   heads, the reviews and the help box carry the brand colours. */
.taf-section.peak-band, .peak-band {
  background-color: #013180;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%20.09%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  color: #FFFFFF; position: relative; overflow: hidden;
}
.peak-band > .taf-wrap { position: relative; z-index: 1; }
.peak-band .taf-eyebrow { color: #CAF200; }
.peak-band h2 { color: #FFFFFF; }
.peak-band .taf-lede { color: #D5E2FA; }
.peak-band .peak-stage { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.peak-band .peak-stage__foot { color: #C9D6EE; }
.peak-band .peak-stage__foot .taf-btn--outline { color: #FFFFFF; border-color: rgba(255, 255, 255, .72); background: transparent; }
.peak-band .peak-stage__foot .taf-btn--outline:hover { background: rgba(255, 255, 255, .1); }
.peak-band .peak-phonecol, .peak-band .peak-reccol { border-color: transparent; box-shadow: 0 18px 40px rgba(0, 20, 58, .45); }
.peak-demo.peak-band { padding-bottom: 24px; }
.peak-tagline.peak-band { padding: 72px 0 120px; }
.peak-tagline.peak-band p { color: #FFFFFF; }
.js-tag .peak-band .peak-tw { color: rgba(255, 255, 255, .2); }
.js-tag .peak-band .peak-tw.is-on { color: #FFFFFF; }
.js-tag .peak-band .peak-tw--hl.is-on { color: #CAF200; }
.peak-zin--blue { background: #0159E8; }
.peak-zin--frost { background: #00C3FF; }
.peak-zin--green { background: #4EE54E; }
.peak-zin--blue .peak-arrow { color: #FFFFFF; }
.peak-zrow__art { box-shadow: 0 12px 30px rgba(1, 49, 128, .10); border-color: transparent; }
.peak-plan__top { background: #4EE54E; }
.peak-plan__top .peak-plan__kind { color: #013180; }
.peak-plan--paid .peak-plan__top { background: #0159E8; }
.peak-plan--paid .peak-plan__kind { color: #CAF200; }
.peak-plan--paid .peak-plan__what { color: #FFFFFF; }
.peak-plan--paid .peak-plan__top .peak-go { color: #FFFFFF; }
.peak-plan--paid .peak-plan__top .peak-go:focus-visible { outline-color: #CAF200; }
.peak-plan { border: 0; box-shadow: 0 12px 30px rgba(1, 49, 128, .10); }
.peak-plan--paid { border: 0; }
.taf-section.peak-tint { background: #E0F8FF; position: relative; overflow: hidden; }
.peak-tint > .taf-wrap { position: relative; z-index: 1; }
.peak-faqside { background: #002258; box-shadow: 0 18px 40px rgba(0, 20, 58, .35); }
.peak-faqside h3 { color: #FFFFFF; }
.peak-faqside p { color: #D5E2FA; }
.peak-faqside .peak-go { color: #CAF200; }
.peak-faqside .peak-go:hover { color: #DDFF4D; }

/* App page: the same soft seam as the home page, where the hero's near range
   meets the foothills navy. The range colour fades into the band over 96px
   (Reece, 5 Nov 2026: the edge showed on the app page). */
.taf-hero--app + .peak-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; pointer-events: none; background: linear-gradient(180deg, #0143AE 0, rgba(1, 67, 174, .55) 30%, rgba(1, 67, 174, .18) 65%, rgba(1, 67, 174, 0) 100%); }

/* 6. App pages: Address Verification, Highlighter, List Browse ----------
   Each page has its own working demo, drawn like the real Salesforce screens.
   The left card holds what the visitor changes; the record on the right
   shows the result. */
.peak-pickcol { align-items: stretch; text-align: left; }
.peak-pickcol .peak-phonecol__label { text-align: left; }
.peak-pickcol .peak-phonecol__hint { max-width: none; text-align: left; }
.peak-pickcol .sfx { max-width: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.peak-pick__note { margin: -8px 0 0; font-size: 14px; line-height: 20px; color: var(--text-dim); }
.peak-pick { display: flex; flex-direction: column; gap: 8px; }
.peak-pickbtn { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 16px; border: 1px solid #DCE4F0; border-radius: 12px; background: #FFFFFF; text-align: left; cursor: pointer;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #181818; transition: border-color 300ms cubic-bezier(.22, 1, .36, 1), background-color 300ms cubic-bezier(.22, 1, .36, 1); }
.peak-pickbtn b { font-size: 15px; line-height: 20px; font-weight: 600; }
.peak-pickbtn span { font-size: 13px; line-height: 18px; color: #566173; }
.peak-pickbtn:hover { border-color: #0159E8; }
.peak-pickbtn[aria-pressed="true"] { border-color: #0159E8; background: #EEF5FF; box-shadow: inset 0 0 0 1px #0159E8; }
.peak-pickbtn:focus-visible, .peak-swatch:focus-visible, .sfx-btn--real:focus-visible, .peak-lbbar button:focus-visible { outline: 3px solid #00C3FF; outline-offset: 2px; }

/* Real buttons and fields inside the drawn Salesforce screens. */
button.sfx-btn { font-family: inherit; cursor: pointer; }
.sfx-btn--real { height: 32px; padding: 0 14px; font-size: 13px; transition: background-color 200ms ease; }
.sfx-btn--real:hover { background: #F3F3F3; }
.sfx-btn--real[disabled] { opacity: .5; cursor: progress; }
.sfx-sub { margin: 4px 0 0; padding: 4px 8px; border-radius: 4px; background: #F3F3F3; font-size: 13px; line-height: 20px; font-weight: 700; color: #181818; }
.peak-rec__body .sfx-v { margin: 0 -4px; padding: 0 4px; border-radius: 3px; }
.peak-flash { animation: peak-flash 1600ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes peak-flash { from { background-color: #CAF200; } to { background-color: rgba(202, 242, 0, 0); } }
.peak-st--ok { color: #2E844A; font-weight: 600; }
.peak-st--wait { color: #444444; }
.peak-cb { display: inline-block; position: relative; width: 14px; height: 14px; vertical-align: -2px; border: 1px solid #747474; border-radius: 2px; background: #FFFFFF; }
.peak-cb.is-on { border-color: #0176D3; background: #0176D3; }
.peak-cb.is-on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.peak-toast { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 4px; background: #2E844A; color: #FFFFFF;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; line-height: 18px; font-weight: 600; animation: peak-slidein 500ms cubic-bezier(.22, 1, .36, 1) both; }
.peak-toast svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.peak-rec__icon--contact { background: #A094ED; }
.peak-rec__icon--acct { background: #5867E8; }
.peak-rec__icon--case { background: #F2CF5B; color: #3E3200; }

/* Address Verification pictures: a map pin, and four objects. */
.peak-map { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 220px; }
.peak-map__grid { position: absolute; inset: -32px; width: calc(100% + 64px); height: calc(100% + 64px); }
.peak-map__grid path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 10; stroke-linecap: round; }
.peak-map__pin { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #002258; color: #CAF200; box-shadow: 0 0 0 12px rgba(0, 34, 88, .18), 0 16px 32px rgba(0, 34, 88, .3); }
.peak-map__pin svg { width: 32px; height: 32px; fill: currentColor; }
.peak-map__card { position: absolute; right: 0; bottom: 0; max-width: 240px; }
.peak-objs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 440px; }
.peak-obj { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.peak-obj .sfx-l { font-weight: 700; color: #181818; font-size: 12px; }

/* Highlighter: the highlighted field, the action window, the colour choice. */
.peak-hlcell .sfx-v { transition: background-color 400ms cubic-bezier(.22, 1, .36, 1), color 400ms cubic-bezier(.22, 1, .36, 1); }
.peak-hlcell.is-hl .sfx-v { margin-top: 2px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; background: var(--hl); color: var(--hl-ink); font-weight: 600; }
.peak-hlcell.is-gone > * { visibility: hidden; }
.peak-renamed { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9999px; background: #CAF200; color: #1C2200; font-size: 10px; line-height: 16px; font-weight: 700; }
.peak-gone { border-bottom-style: dashed; }
.peak-gone .sfx-l { color: #A0A0A0; text-decoration: line-through; }
.peak-selectlook { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 24px 2px 8px; border: 1px solid #C9C9C9; border-radius: 4px; background: #FFFFFF url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20d%3D'M5%208l5%205%205-5'%20fill%3D'none'%20stroke%3D'%23747474'%20stroke-width%3D'2'%2F%3E%3C%2Fsvg%3E") no-repeat right 6px center / 12px 12px; }
.peak-swatchlook { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 3px; }
.peak-rule .sfx__b { display: flex; flex-direction: column; gap: 12px; }
.peak-rule [hidden] { display: none; }
.peak-rule__row { display: flex; flex-direction: column; gap: 6px; }
.peak-rule__note { font-size: 12.5px; color: #181818; }
.peak-select, .peak-input { height: 32px; max-width: 100%; padding: 0 12px; border: 1px solid #C9C9C9; border-radius: 4px; background: #FFFFFF; color: #181818;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; }
.peak-select { padding-right: 32px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20d%3D'M5%208l5%205%205-5'%20fill%3D'none'%20stroke%3D'%23747474'%20stroke-width%3D'2'%2F%3E%3C%2Fsvg%3E") no-repeat right 10px center / 12px 12px; }
.peak-select:focus-visible, .peak-input:focus-visible { outline: 3px solid #00C3FF; outline-offset: 1px; border-color: #0176D3; }
.peak-input { width: 100%; }
.peak-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.peak-swatches__set { display: flex; flex-wrap: wrap; gap: 8px; }
.peak-swatch { width: 32px; height: 32px; padding: 0; border: 2px solid #FFFFFF; border-radius: 6px; box-shadow: 0 0 0 1px #C9C9C9; cursor: pointer; transition: box-shadow 200ms ease; }
.peak-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #0176D3; }
.peak-hex { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; color: #181818; }
.peak-autocol { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #181818; }
.peak-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.peak-rule__try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px; border-radius: 12px; background: #EEF5FF; font-size: 15px; font-weight: 800; color: #002258; }
.peak-tabs { display: flex; gap: 24px; padding: 0 12px; border-bottom: 1px solid #E5E5E5; font-size: 13px; }
.peak-tabs span { padding: 10px 0; color: #444444; }
.peak-tabs .is-on { color: #181818; font-weight: 700; box-shadow: inset 0 -3px 0 #0176D3; }

/* One free plan: the card runs the full width, the list beside the head. */
.peak-plans--one { grid-template-columns: minmax(0, 1fr); }
.peak-plans--one .peak-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.peak-plans--one .peak-plan__top { grid-row: span 2; align-self: stretch; }
.peak-plans--one .peak-plan__note { margin: 0; align-self: start; }
@media (max-width: 900px) {
  .peak-plans--one .peak-plan { display: flex; }
}

/* List Browse: the list view, and the bar on the record page. */
.peak-lblist .sfx-row { grid-template-columns: 20px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr); }
.peak-lbrow { cursor: pointer; transition: background-color 300ms cubic-bezier(.22, 1, .36, 1); }
.peak-lbrow:hover { background: #F7F9FB; }
.peak-lbrow.is-on { background: #EEF4FF; box-shadow: inset 3px 0 0 #0176D3; }
.peak-lbrow input { width: 16px; height: 16px; margin: 0; accent-color: #0176D3; cursor: pointer; }
.peak-lbrow input:focus-visible { outline: 3px solid #00C3FF; outline-offset: 2px; }
.peak-lbcount { margin: 0; padding: 8px 12px; border-top: 1px solid #EFEFEF; font-size: 12px; color: #444444; }
.peak-lbbar { display: flex; align-items: center; gap: 4px; width: fit-content; margin: 0 12px 8px; padding: 4px; border: 1px solid #E5E5E5; border-radius: 8px; background: #F3F3F3; }
.peak-lbbar button, .peak-lbbar > span, .peak-lbbar--xs span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #C9C9C9; border-radius: 4px; background: #FFFFFF; color: #0176D3; cursor: pointer; }
.peak-lbbar > span { cursor: default; }
.peak-lbbar button[disabled] { color: #C9C9C9; cursor: not-allowed; }
.peak-lbbar button:not([disabled]):hover { background: #F3F3F3; }
.peak-lbbar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.peak-lbbar b { min-width: 48px; text-align: center; font-size: 13px; }
.peak-lbbar--sm { margin: 0; }
.peak-lbbar--sm > span { width: 26px; height: 26px; }
.peak-lbbar--xs { gap: 2px; margin: 0; padding: 2px; }
.peak-lbbar--xs span { width: 22px; height: 22px; }
.peak-lbbar--xs svg { width: 12px; height: 12px; }
.peak-lbbar--xs b { min-width: 36px; font-size: 11px; }
.sfx-list--keep .sfx-row > :first-child { display: block; }
@media (max-width: 600px) {
  .peak-lblist .sfx-row { grid-template-columns: 20px minmax(0, 1.6fr) minmax(0, .8fr); }
  .peak-lblist .sfx-row > :first-child { display: block; }
  .peak-lblist .sfx-hide-sm { display: none; }
  .sfx-list--keep .sfx-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .6fr); }
  .peak-objs { gap: 8px; }
}
@media (max-width: 600px) {
  .peak-pickcol + .peak-reccol .peak-rec__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .peak-pickcol + .peak-reccol .peak-rec__wide { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .peak-flash, .peak-toast { animation: none; }
  .peak-hlcell .sfx-v, .peak-pickbtn, .peak-lbrow { transition: none; }
}

/* 7. App page: "Try it with your own email", under the Simple Signature demo.
   A plain form to the demo org's Web-to-Lead. The notes box is a trap for bots:
   people never see it, and the demo org sends no request when it holds text. */
.peak-tryme { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 40px; align-items: center; margin-top: 24px; padding: 32px; border-radius: 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.peak-tryme__title { margin: 0 0 8px; color: #FFFFFF; font-size: 24px; line-height: 32px; font-weight: 800; }
.peak-tryme__text p { margin: 0; color: #D5E2FA; font-size: 16px; line-height: 24px; }
.peak-tryme__label { display: block; margin: 0 0 8px; color: #FFFFFF; font-size: 14px; font-weight: 800; }
.peak-tryme__row { display: flex; gap: 12px; }
.peak-tryme__row input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .72); border-radius: var(--r-md); background: #FFFFFF; color: #0B0C0E; font: inherit; font-size: 16px; }
.peak-tryme__row input:focus-visible { outline: 3px solid #CAF200; outline-offset: 2px; }
.peak-tryme__row .taf-btn { flex: none; white-space: nowrap; }
.peak-tryme__note { margin: 8px 0 0; color: #C9D6EE; font-size: 14px; line-height: 20px; }
.peak-tryme__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
  .peak-tryme { grid-template-columns: minmax(0, 1fr); padding: 24px; }
}
@media (max-width: 480px) {
  .peak-tryme__row { flex-direction: column; }
  .peak-tryme__row input { flex: none; }
  .peak-tryme__row .taf-btn { justify-content: center; }
}