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