/* Manrope, served from our own domain. Self hosted on 19 October 2026 to drop the render
   blocking request to fonts.googleapis.com and the extra connection to fonts.gstatic.com.
   It is the variable font, so 400 to 800 all come from 1 file. Latin and latin-ext only,
   because this site is in English. Update both files together if the font is ever changed. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FiveStariz marketing site. Same family as the app: Manrope, teal primary, cool gray, 16px radius. */
:root {
  --p: #0f766e; --p-dark: #0b5a54; --p-light: #14b8a6; --p-pale: #e6f4f2; --p-rgb: 15, 118, 110;
  --ink: #0b1a21; --ink-2: #102730; --ink-line: rgba(255, 255, 255, .12);
  --bg: #f4f6f8; --card: #fff; --text: #15202b; --muted: #55646f; --faint: #8392a0;
  --line: #e2e8ee; --line-2: #eef2f6;
  --gold: #e9a23b;
  --e1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .07);
  --e2: 0 6px 16px rgba(16, 24, 40, .08), 0 2px 5px rgba(16, 24, 40, .05);
  --e3: 0 20px 44px rgba(16, 24, 40, .14);
  --r: 16px; --r-lg: 22px; --r-sm: 10px;
  --wrap: 1140px;
  --font: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased }
img, svg { max-width: 100% }
a { color: var(--p); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; border-radius: 4px }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.025em; line-height: 1.12; font-weight: 800 }
h1 { font-size: clamp(34px, 5.2vw, 56px) }
h2 { font-size: clamp(26px, 3.6vw, 38px) }
h3 { font-size: 19px; line-height: 1.3 }
p { margin: 0 0 14px }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px }
.narrow { max-width: 780px }
.muted { color: var(--muted) }
.small { font-size: 14px }
.center { text-align: center }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); line-height: 1.55 }
.nowrap { white-space: nowrap }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 16px; border: 1px solid transparent; cursor: pointer; transition: transform .14s, box-shadow .18s, background .18s, border-color .18s; text-decoration: none }
.btn:hover { text-decoration: none; transform: translateY(-1px) }
.btn.p { background: var(--p); color: #fff; box-shadow: 0 6px 16px rgba(var(--p-rgb), .3) }
.btn.p:hover { background: var(--p-dark); box-shadow: 0 10px 22px rgba(var(--p-rgb), .34) }
.btn.g { background: #fff; color: var(--text); border-color: var(--line) }
.btn.g:hover { border-color: #c9d4de }
.btn.ghost { background: transparent; color: #fff; border-color: var(--ink-line) }
.btn.ghost:hover { background: rgba(255, 255, 255, .08) }
.btn.sm { padding: 9px 16px; font-size: 15px }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center }

/* header */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(244, 246, 248, .88); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s }
.hdr.stuck { border-color: var(--line); background: rgba(244, 246, 248, .96) }
.hdr .wrap { display: flex; align-items: center; gap: 10px; height: 70px }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.03em; color: var(--text) }
.logo:hover { text-decoration: none }
.logo .mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(140deg, var(--p-light), var(--p)); color: #fff; display: grid; place-items: center; box-shadow: var(--e2) }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 22px }
.nav > * { position: relative }
.nav a.top { display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 15px }
.nav a.top:hover, .nav .on > a.top { color: var(--text); background: #e9eef3; text-decoration: none }
.hdr .right { margin-left: auto; display: flex; align-items: center; gap: 10px }
.drop { position: absolute; top: 100%; left: 0; padding-top: 10px; display: none }
.nav .has:hover .drop, .nav .has:focus-within .drop { display: block }
.drop-in { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--e3); padding: 10px; width: 320px; display: grid; gap: 2px }
.drop-in.two { width: 560px; grid-template-columns: 1fr 1fr }
.drop-in a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--text); font-weight: 600; font-size: 15px }
.drop-in a:hover { background: var(--p-pale); color: var(--p-dark); text-decoration: none }
.drop-in a span { display: block; font-weight: 500; font-size: 13px; color: var(--muted); margin-top: 2px }
.drop-in a:hover span { color: var(--p-dark) }
.burger { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center }

/* sections */
section { padding: clamp(56px, 7vw, 92px) 0 }
section.tight { padding: clamp(40px, 5vw, 64px) 0 }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--p); margin-bottom: 14px }
.eyebrow.on-dark { color: var(--p-light) }
.sec-h { max-width: 720px; margin-bottom: 42px }
.sec-h.center { margin-left: auto; margin-right: auto }
.sec-h p { margin: 14px 0 0 }
.dark { background: var(--ink); color: #eef4f6; position: relative; overflow: hidden }
.dark h1, .dark h2, .dark h3 { color: #fff }
.dark .muted, .dark .lead { color: #a9bcc5 }
.dark::before { content: ""; position: absolute; inset: -40% 50% auto -20%; height: 620px; background: radial-gradient(closest-side, rgba(20, 184, 166, .22), transparent); pointer-events: none }
.tinted { background: linear-gradient(180deg, #fff, var(--bg)) }
.white { background: #fff }

/* grids and cards */
.grid { display: grid; gap: 20px }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--e1) }
.card.hover { transition: transform .16s, box-shadow .2s, border-color .2s }
.card.hover:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: #d4dde6 }
.card h3 { margin-bottom: 8px }
.card p:last-child { margin-bottom: 0 }
.card .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--p-pale); color: var(--p); display: grid; place-items: center; margin-bottom: 16px }
.dark .card { background: rgba(255, 255, 255, .045); border-color: var(--ink-line); box-shadow: none }
.dark .card .ico { background: rgba(20, 184, 166, .16); color: #5eead4 }
.chips { display: flex; flex-wrap: wrap; gap: 9px }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--muted) }
.dark .chip { background: rgba(255, 255, 255, .06); border-color: var(--ink-line); color: #cfe0e5 }

/* hero */
.hero { padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 7vw, 92px) }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center }
.hero h1 { margin-bottom: 20px }
.hero h1 .hl { color: var(--p-light) }
.hero .lead { max-width: 560px }
.hero .under { margin-top: 16px; font-size: 14px; color: var(--faint); display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.dark .hero .under { color: #8aa2ac }
.dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5 }

/* steps */
.steps { display: grid; gap: 26px; counter-reset: s }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start }
.step .n { width: 52px; height: 52px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--e1); display: grid; place-items: center; font-weight: 800; color: var(--p); font-size: 18px }
.step h3 { margin-bottom: 6px }
.step p { margin: 0; color: var(--muted) }

/* list with ticks */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; color: var(--muted) }
.ticks li b, .ticks li strong { color: var(--text); font-weight: 700 }
.dark .ticks li b { color: #fff }
.ticks .t { width: 22px; height: 22px; border-radius: 50%; background: var(--p-pale); color: var(--p); display: grid; place-items: center; margin-top: 2px }
.dark .ticks .t { background: rgba(20, 184, 166, .18); color: #5eead4 }

/* alternating feature rows */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center }
.row2 + .row2 { margin-top: clamp(48px, 6vw, 80px) }
.row2.flip .copy { order: 2 }

/* product mockups */
.ui { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--e3); overflow: hidden; font-size: 14px }
.ui-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: #fbfcfd }
.ui-top b { font-size: 14px; font-weight: 700 }
.ui-body { padding: 16px }
.ui-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line-2) }
.ui-row:first-child { border-top: 0 }
.ui-row .av { width: 32px; height: 32px; border-radius: 50%; background: var(--p-pale); color: var(--p-dark); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none }
.ui-row .grow { flex: 1; min-width: 0 }
.ui-row .nm { font-weight: 700 }
.ui-row .sub { font-size: 12.5px; color: var(--muted) }
.tag { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; letter-spacing: .02em }
.tag.ok { background: #e5f5ee; color: #0d6b4d }
.tag.wait { background: #fef2e2; color: #93400a }
.tag.teal { background: var(--p-pale); color: var(--p-dark) }
.bubble { background: var(--p); color: #fff; padding: 12px 15px; border-radius: 16px 16px 16px 5px; max-width: 330px; line-height: 1.5; box-shadow: var(--e2) }
.bubble .lnk { color: #c8fff5; text-decoration: underline }
.phone { width: 268px; margin: 0 auto; background: var(--ink); border-radius: 30px; padding: 11px; box-shadow: var(--e3) }
.phone .screen { background: #fff; border-radius: 22px; overflow: hidden }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 15px }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px }
.kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em }
.kpi .l { font-size: 12.5px; color: var(--muted); font-weight: 600 }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--e1); display: flex; flex-direction: column }
.plan.best { border-color: var(--p); box-shadow: 0 0 0 3px rgba(var(--p-rgb), .1), var(--e2); position: relative }
.plan .flag { position: absolute; top: -13px; left: 24px; background: var(--p); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px }
.plan .nm { font-weight: 800; font-size: 18px }
.plan .price { font-size: 42px; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 2px }
.plan .price span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0 }
.plan .who { color: var(--muted); font-size: 14px; min-height: 42px }
.plan .btn { width: 100%; justify-content: center; margin: 18px 0 20px }
.plan .ticks { font-size: 15px }
.ptable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 15px }
.ptable th, .ptable td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-2) }
.ptable th { background: #f8fafb; font-weight: 700; font-size: 14px }
.ptable td.c, .ptable th.c { text-align: center }
.ptable tr:last-child td { border-bottom: 0 }
.ptable .yes { color: var(--p); font-weight: 700 }
.ptable .no { color: #697886 }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch }

/* faq */
.faq { display: grid; gap: 12px }
.q { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.q summary { padding: 18px 22px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 14px; list-style: none; font-size: 17px }
.q summary::-webkit-details-marker { display: none }
.q summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 600; color: var(--p); line-height: 1 }
.q[open] summary::after { content: "\2013" }
.q .a { padding: 0 22px 20px; color: var(--muted) }
.q .a p:last-child { margin-bottom: 0 }

/* cta band */
.band { background: linear-gradient(135deg, var(--ink), #123d41); border-radius: 26px; padding: clamp(34px, 5vw, 56px); color: #fff; text-align: center; position: relative; overflow: hidden }
.band::after { content: ""; position: absolute; inset: auto -10% -70% 40%; height: 320px; background: radial-gradient(closest-side, rgba(20, 184, 166, .3), transparent) }
.band h2 { margin-bottom: 14px; position: relative }
.band p { color: #a9bcc5; max-width: 560px; margin: 0 auto 24px; position: relative }
.band .btn-row { justify-content: center; position: relative }

/* footer */
.ftr { background: var(--ink); color: #9fb4bd; padding: 64px 0 34px; font-size: 15px }
.ftr a { color: #c8d7dd }
.ftr a:hover { color: #fff }
.ftr-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px }
.ftr h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.ftr .logo { color: #fff; margin-bottom: 14px }
.ftr .fine { border-top: 1px solid var(--ink-line); margin-top: 44px; padding-top: 22px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 14px; color: #7d949d }
.ftr .fine .grow { flex: 1 }

/* misc blocks */
.note { background: var(--p-pale); border: 1px solid #c9e6e2; border-radius: var(--r); padding: 16px 20px; color: #0b4d47 }
.note b { color: #083b36 }
.breadcrumb { font-size: 14px; color: var(--faint); margin-bottom: 14px }
.breadcrumb a { color: var(--muted) }
form .field { margin-bottom: 16px }
form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px }
form input, form select, form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: #fff }
form input:focus, form textarea:focus, form select:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px rgba(var(--p-rgb), .14) }
.formmsg { display: none; margin-top: 14px; padding: 13px 16px; border-radius: var(--r-sm); font-weight: 600 }
.formmsg.ok { display: block; background: #e5f5ee; color: #0b6b4c }
.formmsg.bad { display: block; background: #fdece7; color: #9c2a09 }

@media (max-width: 960px) {
  .hero-grid, .row2, .g4, .plans { grid-template-columns: 1fr }
  .row2 { gap: 32px }
  .row2.flip .copy { order: 0 }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 28px }
  .nav, .hdr .right .btn.g { display: none }
  .burger { display: inline-flex }
  .hdr .right { margin-left: 0 }
}
@media (max-width: 620px) {
  .g2, .g3, .kpis { grid-template-columns: 1fr }
  .ftr-grid { grid-template-columns: 1fr }
  .hero { padding-top: 30px }
  .card { padding: 20px }
}
/* mobile menu */
.mnav { display: none; position: fixed; inset: 70px 0 0; background: var(--bg); z-index: 39; overflow: auto; padding: 18px 22px 40px }
.mnav.open { display: block }
.mnav a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--text); font-size: 17px }
.mnav .sub a { font-weight: 600; color: var(--muted); font-size: 15px; padding-left: 14px }
.mnav .btn { margin-top: 20px; width: 100%; justify-content: center }
body.locked { overflow: hidden }

/* A product picture is always a light surface, even inside a dark section. */
.ui, .phone .screen { color: var(--text) }
.dark .ui, .dark .phone .screen { background: #fff }
.dark .ui b, .dark .ui h1, .dark .ui h2, .dark .ui h3, .dark .phone .screen b { color: var(--text) }
.dark .ui .muted, .dark .phone .screen .muted, .dark .ui .sub, .dark .ui .l { color: var(--muted) }
.dark .ui .chip { background: #fff; border-color: var(--line); color: var(--muted) }
.dark .ui .card, .dark .ui .kpi { background: #fff; border-color: var(--line) }
.dark .ui .card .ico { background: var(--p-pale); color: var(--p) }
.dark .ui .ticks li { color: var(--muted) }
.dark .ui .ticks .t { background: var(--p-pale); color: var(--p) }

/* The header button keeps 1 line on a phone, with a shorter word. */
.hcta .sm2 { display: none }
.hcta { white-space: nowrap }
@media (max-width: 620px) {
  .hcta .lg { display: none }
  .hcta .sm2 { display: inline }
  .hdr .wrap { gap: 8px; height: 64px }
  .hdr .right { gap: 8px }
  .logo { font-size: 17px }
  .burger { width: 40px; height: 40px }
  .mnav { inset: 64px 0 0 }
}

/* Legal pages: long text, read like a document. */
.legal h2 { font-size: 22px; margin: 34px 0 10px }
.legal h3 { font-size: 17px; margin: 22px 0 8px }
.legal p, .legal li { color: var(--muted); font-size: 16.5px }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 14px }
.legal li { margin-bottom: 7px }
.legal .muted { font-size: 14px }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0 }
.legal td, .legal th { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 15px }

/* ============ homepage, second pass: numbered sections and a visual per screen ============ */
/* A numbered section label with a hairline rule, so the page reads as a sequence. */
.numsec { display: flex; align-items: center; gap: 14px; margin-bottom: 30px }
.numsec .n { font-weight: 800; color: var(--p); font-size: 14px; font-variant-numeric: tabular-nums }
.numsec .l { font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted) }
.numsec .rule { flex: 1; height: 1px; background: var(--line) }
.dark .numsec .n { color: var(--p-light) }
.dark .numsec .l { color: #9fb8c2 }
.dark .numsec .rule { background: var(--ink-line) }

/* Heading on the left that stays put while the right side scrolls. */
.split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: start }
.split .left { position: sticky; top: 100px }
.split .left h2 { margin-bottom: 16px }
.split .left p { color: var(--muted) }

/* The review sites your customers already use. */
.strip { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; overflow: hidden }
.strip .lbl { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5f6e7b; margin-bottom: 18px }
.strip .track { display: flex; gap: 42px; width: max-content; animation: slide 34s linear infinite }
.strip .track span { font-size: 19px; font-weight: 700; color: #6b7a87; white-space: nowrap; letter-spacing: -.01em }
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .strip .track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 18px 32px } }

/* The customer journey, 3 frames side by side. */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start }
.journey .j { text-align: center }
.journey .cap { margin-top: 18px }
.journey .cap b { display: block; font-size: 17px; margin-bottom: 4px }
.journey .cap span { color: var(--muted); font-size: 14.5px }
.journey .arrow { display: none }

/* A browser window around a product picture. */
.frame { border-radius: 16px; overflow: hidden; box-shadow: var(--e3); background: #fff; border: 1px solid var(--line) }
.frame .bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #eef2f6; border-bottom: 1px solid var(--line) }
.frame .bar i { width: 11px; height: 11px; border-radius: 50%; background: #cfd8e1; display: block }
.frame .bar .url { flex: 1; text-align: center; font-size: 12.5px; color: #5f6e7b; background: #fff; border-radius: 7px; padding: 5px 10px; margin: 0 6% }
.frame .shot { padding: 22px; background: var(--bg); display: grid; gap: 18px; grid-template-columns: 1fr 1fr }
@media (max-width: 860px) { .frame .shot { grid-template-columns: 1fr } }

/* Big product facts, not invented statistics. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px }
.facts .f .v { font-size: clamp(38px, 5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--p-light) }
.facts .f .k { font-weight: 700; margin: 12px 0 4px; font-size: 16.5px }
.facts .f p { color: #a9bcc5; font-size: 14.5px; margin: 0 }

/* Tabs showing what the customer gets. */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px }
.tabs button { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 15px; color: var(--muted) }
.tabs button[aria-selected="true"] { background: var(--p); border-color: var(--p); color: #fff; box-shadow: 0 6px 16px rgba(var(--p-rgb), .28) }
.panel { display: none }
.panel.on { display: block }
.panel .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center }
@media (max-width: 860px) { .panel .inner { grid-template-columns: 1fr; gap: 28px } }

/* Business type tiles. */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 15px; transition: transform .14s, box-shadow .2s, border-color .2s }
.tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--e2); border-color: var(--p) }
.tile .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--p-pale); color: var(--p); display: grid; place-items: center }
.tile span { color: var(--muted); font-weight: 500; font-size: 13px }

/* FAQ with the heading beside it. */
.faq2 { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start }
.faq2 .left { position: sticky; top: 100px }

@media (max-width: 960px) {
  .split, .faq2, .journey { grid-template-columns: 1fr; gap: 30px }
  .split .left, .faq2 .left { position: static }
  .facts { grid-template-columns: repeat(2, 1fr) }
  .tiles { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: repeat(2, 1fr) }
  .facts { grid-template-columns: 1fr }
}

/* Fixes after looking at the page: a dim paragraph on dark, and 3 phones of different heights. */
.dark .split .left p, .dark .split .left .lead { color: #a9bcc5 }
.journey .j { display: grid; grid-template-rows: auto 1fr; align-content: start }
.journey .phone .screen { min-height: 356px }
.journey .j:first-child .bubble { max-width: 100%; font-size: 14px }
.journey .cap b { font-size: 16.5px }

/* ============ pricing page ============ */
.pricehero { background: linear-gradient(180deg, #e9f5f3 0%, #f4f8f8 55%, var(--bg) 100%); padding: clamp(46px, 6vw, 76px) 0 clamp(34px, 4vw, 52px); text-align: center }
.pricehero h1 { max-width: 760px; margin: 0 auto }
.pricehero .lead { max-width: 620px; margin: 16px auto 0 }
.pricehero .under { margin-top: 20px; font-size: 14.5px; color: var(--muted) }

.plans4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start }
.plans4 .plan { padding: 26px 22px }
.plans4 .plan .price { font-size: 38px }
.plans4 .plan .who { min-height: 38px; font-size: 13.5px }
.plans4 .ticks { font-size: 14.5px; gap: 9px }
.plans4 .ticks li { grid-template-columns: 19px 1fr; gap: 9px }
.plans4 .ticks .t { width: 19px; height: 19px }

/* The feature matrix, in 1 rounded card with the popular column marked. */
.matrix { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e1) }
.matrix table { width: 100%; border-collapse: collapse; font-size: 15px }
.matrix th, .matrix td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-2) }
.matrix thead th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: #fbfcfd; white-space: nowrap }
.matrix thead th.c, .matrix td.c { text-align: center }
.matrix thead th.best { color: var(--p) }
.matrix tr.group td { background: #f4f8f8; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--p-dark); padding: 11px 16px }
.matrix td.best, .matrix th.best { background: rgba(var(--p-rgb), .045) }
.matrix td:first-child { font-weight: 600 }
.matrix .yes { color: var(--p) }
.matrix .no { color: #5f6e7b }
.matrix tbody tr:last-child td { border-bottom: 0 }
@media (max-width: 1000px) { .plans4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 620px) { .plans4 { grid-template-columns: 1fr } .matrix table { font-size: 14px } .matrix th, .matrix td { padding: 11px 12px } }

/* Monthly or yearly. The page holds both prices and shows 1. */
.paytoggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--e1) }
.paytoggle button { padding: 9px 20px; border-radius: 999px; border: 0; background: transparent; font-weight: 700; font-size: 15px; color: var(--muted) }
.paytoggle button[aria-pressed="true"] { background: var(--p); color: #fff; box-shadow: 0 4px 12px rgba(var(--p-rgb), .28) }
.paytoggle .save { font-size: 13px; font-weight: 700; color: var(--p-dark); background: var(--p-pale); padding: 6px 12px; border-radius: 999px; margin: 0 4px 0 6px }
.plan .payline { margin: -2px 0 2px; min-height: 20px }