/* 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 }