/* Public marketing site. Hidden on white-label hosts. */
:root {
  --s-bg: #f3f5f4;
  --s-ink: #10312a;
  --s-text: #4b5d57;
  --s-muted: #6b7b76;
  --s-line: #d9dfdd;
  --s-yellow: #f5cf47;
  --s-dark: #0f2e28;
  --s-green: #1d7a55;
  --s-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --s-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.site { margin: 0; background: var(--s-bg); color: var(--s-text); font-family: var(--s-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.site a { color: inherit; text-decoration: none; }
.wrap { max-width: 1010px; margin: 0 auto; padding: 0 16px; }
.s-nav { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.site .logo { display: flex; align-items: center; gap: 9px; font-family: var(--s-head); font-weight: 600; font-size: 17.5px; color: var(--s-ink); letter-spacing: -.005em; }
.logo-mark { width: 27px; height: 27px; border-radius: 6px; background: var(--s-dark); display: grid; place-items: center; flex: 0 0 27px; }
.logo-mark i { width: 13px; height: 5px; border-radius: 2px; background: var(--s-yellow); display: block; }
.s-links { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.s-links > a:not(.s-btn) { color: var(--s-text); }
.s-links > a:not(.s-btn):hover { color: var(--s-ink); }
.s-links .gap { width: 5px; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 13px; border-radius: 8px; font-weight: 600; font-size: 13.5px; border: 1px solid var(--s-line); background: #f7f8f7; color: var(--s-ink) !important; white-space: nowrap; }
.s-btn.yellow { background: var(--s-yellow); border-color: var(--s-yellow); }
.s-btn.solid { background: var(--s-dark); border-color: var(--s-dark); color: #fff !important; }
.s-btn.lg { height: 38px; padding: 0 18px; font-size: 14.5px; font-weight: 500; }
.s-btn:hover { filter: brightness(.97); }

.hero { display: grid; grid-template-columns: 464px 425px; justify-content: space-between; gap: 40px; align-items: center; padding-top: 78px; padding-bottom: 96px; }
.hero h1 { max-width: 445px; font-family: var(--s-head); font-weight: 700; font-size: 60.5px; line-height: 1.0; letter-spacing: -.02em; color: var(--s-ink); margin: 0 0 30px; }
.hero p { font-size: 16.5px; line-height: 1.64; margin: 0 0 28px; max-width: 470px; }
.hero .ctas { display: flex; gap: 11px; margin-bottom: 18px; }
.hero .fine { font-size: 13px; color: var(--s-muted); margin: 0; }
.demo { background: #fff; border: 1px solid var(--s-line); border-radius: 16px; padding: 20px 20px 22px; box-shadow: 0 24px 48px -12px rgba(16, 49, 42, .18); }
.demo .top { display: flex; justify-content: space-between; font-size: 12px; color: var(--s-muted); }
.demo .top time { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.demo h3 { font-family: var(--s-head); font-size: 21px; color: var(--s-ink); margin: 0 0 14px; font-weight: 600; }
.demo .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.demo .tile { background: #f0f3f2; border-radius: 8px; padding: 8px 10px 9px; font-size: 11.5px; color: var(--s-muted); }
.demo .tile b { display: block; font-family: var(--s-head); font-size: 17px; color: var(--s-ink); margin-top: 3px; }
.demo ul { list-style: none; margin: 0; padding: 0 0 14px; border-bottom: 1px dashed var(--s-line); }
.demo li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--s-ink); padding: 2.5px 0; }
.demo li .tick { width: 19px; height: 19px; border-radius: 50%; background: var(--s-green); color: #fff; display: grid; place-items: center; font-size: 11px; flex: 0 0 19px; }
.demo li small { margin-left: auto; color: var(--s-muted); font-size: 12px; }
.demo .assigned { display: flex; align-items: center; gap: 11px; padding-top: 16px; }
.demo .av { width: 34px; height: 34px; border-radius: 50%; background: var(--s-dark); color: #cbd5d1; font-size: 11px; display: grid; place-items: center; }
.demo .assigned b { font-weight: 500; color: var(--s-ink); font-size: 14px; display: block; }
.demo .assigned span { font-size: 12px; color: var(--s-muted); }
.demo .stamp { margin-left: auto; background: var(--s-yellow); color: var(--s-ink); font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 4px; transform: rotate(-3deg); text-decoration: underline; text-underline-offset: 2px; }

.s-section { border-top: 1px solid var(--s-line); padding: 92px 0 96px; }
.s-section h2 { font-family: var(--s-head); font-weight: 600; font-size: 40px; line-height: 1.06; letter-spacing: -.015em; color: var(--s-ink); margin: 0 0 20px; }
.s-section .intro { font-size: 16.5px; line-height: 1.6; max-width: 600px; margin: 0 0 36px; }
.stages { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding-top: 22px; }
.stages::before { content: ''; position: absolute; top: 7px; left: 6px; right: 0; height: 2px; background: var(--s-ink); }
.stage { position: relative; padding-right: 22px; }
.stage::before { content: ''; position: absolute; top: -21px; left: 0; width: 9px; height: 9px; border: 2px solid var(--s-ink); border-radius: 50%; background: var(--s-bg); }
.stage small { display: block; font-size: 12.5px; font-weight: 500; color: var(--s-muted); margin-bottom: 6px; }
.stage h3 { font-family: var(--s-head); font-size: 19.5px; font-weight: 500; color: var(--s-ink); margin: 0 0 14px; }
.stage p { font-size: 13.5px; line-height: 1.56; margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 30px; }
.panel { background: #fff; border: 1px solid var(--s-line); border-radius: 16px; padding: 24px 23px 26px; }
.panel h3 { font-family: var(--s-head); font-weight: 500; font-size: 19.5px; color: var(--s-ink); margin: 0 0 16px; }
.panel p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; }
.tags { display: flex; flex-wrap: wrap; gap: 7px 7px; margin-bottom: 14px; }
.tags span { border: 1px solid var(--s-line); background: #f2f4f3; border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--s-ink); }
.panel .small { font-size: 13.5px; line-height: 1.6; margin: 0; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--s-ink); font-size: 14.5px; }
.checklist li::before { content: '✓'; position: absolute; left: 2px; top: 0; color: var(--s-green); font-size: 13px; }
.checklist li span { display: block; color: var(--s-muted); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.dark .checklist li { color: #fff; }
.dark .checklist li::before { color: var(--s-yellow); }
.dark .checklist li span { color: #c3d2cc; }
.browser { background: #fff; border: 1px solid var(--s-line); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -16px rgba(16, 49, 42, .2); }
.browser .bar { height: 28px; background: #f2f4f3; border-bottom: 1px solid var(--s-line); display: flex; gap: 6px; align-items: center; padding: 0 12px; }
.browser .bar i { width: 8px; height: 8px; border-radius: 50%; background: #d1d8d5; display: block; }
.browser img { display: block; width: 100%; height: auto; }
.dark { background: var(--s-dark); color: #d5e0dc; border-radius: 22px; padding: 52px 50px; display: grid; grid-template-columns: 1fr 452px; gap: 56px; align-items: center; }
.dark h2 { color: #fff; font-weight: 500; font-size: 37px; line-height: 1.13; margin: 0 0 20px; }
.dark p { font-size: 15.5px; line-height: 1.6; margin: 0 0 24px; }
.plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 17px; margin-bottom: 18px; align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--s-line); border-radius: 14px; padding: 22px 21px 22px; display: flex; flex-direction: column; }
.plan.hl { border: 2px solid var(--s-ink); padding: 21px 20px; }
.plan .badge { align-self: flex-start; background: var(--s-yellow); color: var(--s-ink); font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 8px; margin-bottom: 12px; }
.plan h3 { font-family: var(--s-head); font-weight: 500; font-size: 19.5px; color: var(--s-ink); margin: 0 0 14px; }
.plan .desc { font-size: 14px; line-height: 1.55; margin: 0 0 12px; min-height: 44px; }
.plan .price { font-family: var(--s-head); font-weight: 700; font-size: 31px; color: var(--s-ink); margin-bottom: 10px; line-height: 1.1; }
.plan .price small { font-family: var(--s-body); font-weight: 400; font-size: 13px; color: var(--s-muted); }
.plan .note { font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
.plan ul { list-style: none; margin: 0 0 20px; padding: 0; }
.plan li { position: relative; padding-left: 15px; font-size: 13.5px; color: var(--s-ink); margin-bottom: 7px; line-height: 1.5; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--s-green); font-size: 11.5px; top: 1px; }
.plan li.no { color: #9aa8a3; }
.plan li.no::before { content: '–'; color: #9aa8a3; }
.plan .s-btn { align-self: flex-start; height: 37px; font-size: 13px; padding: 0 10px; }
.fineprint { font-size: 13px; color: var(--s-muted); }
.s-foot { border-top: 1px solid var(--s-line); margin-top: 70px; padding: 28px 0 40px; display: flex; justify-content: space-between; font-size: 13px; color: var(--s-muted); gap: 16px; }
.s-foot nav { display: flex; gap: 16px; }
.mt-dark { padding: 92px 0; border-top: 1px solid var(--s-line); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; padding-bottom: 60px; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .dark { grid-template-columns: 1fr; padding: 36px 24px; }
  .stages { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .stages::before, .stage::before { display: none; }
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .s-nav { height: auto; padding: 14px 0; }
  .logo { line-height: 1.2; max-width: 220px; }
  .logo-mark { width: 29px; height: 29px; flex-basis: 29px; }
  .s-links > a:not(.yellow), .s-links .gap { display: none; }
  .s-links .s-btn.yellow { height: 32px; font-size: 13.5px; font-weight: 500; padding: 0 14px; }
  .hero { padding-top: 22px; }
  .hero h1 { font-size: 39px; line-height: 1.04; margin-bottom: 26px; }
  .hero p { font-size: 17px; line-height: 1.72; }
  .hero .ctas .s-btn { height: 41px; }
  .hero .fine { line-height: 1.7; }
  .stages { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .s-section h2 { font-size: 30px; }
  .s-foot { flex-direction: column; }
}