@font-face {
  font-family:system-fallback;
  src:local('Arial')
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:#f7f8f5;
  color:#25362e;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;
  line-height:1.55
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.65
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #91b890;
  outline-offset:3px
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:34px;
  line-height:1.2;
  letter-spacing:-1.2px;
  font-weight:550;
  margin-bottom:12px
}
h2 {
  font-size:18px;
  letter-spacing:-.35px;
  line-height:1.35;
  margin-bottom:7px;
  font-weight:600
}
h3 {
  font-size:17px
}
p {
  color:#778078
}
small {
  font-size:12px
}
.green-text {
  color:#649173
}
.serif {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-style:italic
}
input,textarea,select {
  width:100%;
  border:1px solid #dce1d9;
  border-radius:8px;
  background:white;
  color:#2c3d33;
  padding:12px 13px;
  min-width:0
}
input[type=checkbox],input[type=radio] {
  width:auto
}
textarea {
  resize:vertical
}
select {
  appearance:auto
}
label {
  font-weight:500
}
label small,legend small {
  font-weight:400;
  color:#90978d;
  margin-left:5px
}
fieldset {
  border:0;
  padding:0;
  margin:0 0 24px
}
legend {
  padding:0;
  margin-bottom:12px;
  font-weight:500
}
label+input,label+textarea,label+select {
  margin-top:7px
}
button {
  border:0
}
form p {
  color:#2d3e33
}
form p label {
  display:block;
  margin-bottom:7px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#2d523e;
  color:#fff;
  padding:12px 20px;
  border:1px solid #2d523e;
  border-radius:8px;
  font-size:13px;
  font-weight:550;
  white-space:nowrap;
  transition:background .15s
}
.button:hover {
  background:#193e2d
}
.button.secondary {
  color:#344638;
  background:#fff;
  border-color:#dce2d8
}
.button.secondary:hover {
  background:#edf2e9
}
.button.small {
  padding:8px 13px;
  font-size:12px
}
.button.full {
  width:100%
}
.button-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.icon-button {
  background:transparent;
  color:#637367;
  font-size:19px;
  padding:5px 8px;
  border-radius:6px
}
.text-link {
  color:#33583e;
  font-size:12px;
  font-weight:550;
  display:inline-flex;
  align-items:center;
  gap:12px
}
.text-link:hover {
  text-decoration:underline
}
.text-button {
  background:none;
  padding:0;
  font-size:12px
}
.danger {
  color:#a6534a!important
}
.wordmark {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:650;
  font-size:25px;
  letter-spacing:-1.3px;
  color:#294834;
  line-height:1
}
.brand-dot {
  font-size:10px;
  align-self:flex-start;
  margin-left:-5px;
  margin-top:3px
}
.logo-mark {
  display:inline-grid;
  place-items:center;
  background:#2d523e;
  color:white;
  width:32px;
  height:32px;
  border-radius:10px;
  font-size:30px;
  font-weight:600;
  line-height:1;
  padding-bottom:5px;
  letter-spacing:-3px;
  padding-right:3px
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:650;
  color:#69806b;
  margin-bottom:13px
}
.app-shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:231px;
  position:fixed;
  inset:0 auto 0 0;
  background:#fdfefa;
  border-right:1px solid #e5e8df;
  padding:33px 20px 16px;
  display:flex;
  flex-direction:column;
  z-index:5
}
.sidebar>.wordmark {
  padding-left:13px;
  margin-bottom:36px
}
.workspace-pill {
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid #e4e8de;
  border-radius:9px;
  background:#f7f9f3;
  padding:12px 10px;
  margin-bottom:31px
}
.workspace-avatar {
  background:#dde6d2;
  color:#54644a;
  border:1px solid #d4ddca;
  border-radius:6px;
  width:33px;
  height:34px;
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-size:19px;
  flex-shrink:0
}
.workspace-pill strong {
  display:block;
  font-size:11px;
  max-width:115px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.workspace-pill small {
  display:block;
  font-size:10px;
  color:#929a8e
}
.nav-label {
  font-size:9px;
  letter-spacing:1.6px;
  font-weight:600;
  margin:0 13px 11px;
  color:#99a090
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:6px
}
.sidebar nav a {
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:7px;
  padding:10px 13px;
  color:#7e897c;
  font-size:12px
}
.sidebar nav a span {
  font-size:21px;
  line-height:1;
  width:19px;
  font-weight:400;
  text-align:center
}
.sidebar nav a:hover {
  background:#f3f6ee
}
.sidebar nav a[aria-current=page] {
  background:#e9f0e0;
  color:#385336;
  font-weight:600
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:45px
}
.sidebar-note {
  background:#f2f5eb;
  border:1px solid #e6ebdc;
  padding:15px;
  border-radius:9px;
  margin-bottom:24px
}
.mini-spark {
  display:block;
  font-size:27px;
  color:#75915a;
  margin-bottom:10px
}
.sidebar-note strong {
  font-size:11px;
  display:block;
  margin-bottom:5px
}
.sidebar-note p {
  font-size:10px;
  color:#8a947f;
  line-height:1.7;
  margin:0
}
.user-line {
  display:flex;
  align-items:center;
  gap:9px;
  padding:14px 5px 0;
  border-top:1px solid #e7e9e2
}
.user-avatar {
  background:#e9ede3;
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:#758164;
  font-size:13px;
  flex-shrink:0
}
.user-line strong {
  display:block;
  font-size:11px;
  max-width:100px;
  overflow:hidden;
  text-overflow:ellipsis
}
.user-line small {
  display:block;
  color:#98a090;
  font-size:10px
}
.user-line form {
  margin-left:auto
}
.workspace-main {
  margin-left:231px;
  min-width:0;
  flex:1
}
.topbar {
  height:74px;
  border-bottom:1px solid #e6e9e2;
  background:#fdfefa;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 39px;
  font-size:11px
}
.breadcrumb {
  color:#697762
}
.breadcrumb span {
  color:#c5cbbe;
  padding:0 15px
}
.help-link {
  color:#88917f;
  font-size:10px
}
.help-link span {
  margin-left:8px
}
.workspace-main main {
  max-width:1500px;
  margin:0 auto;
  padding:37px 39px 20px
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:27px
}
.page-heading p:not(.eyebrow) {
  font-size:12px;
  margin-bottom:0
}
.page-heading h1 {
  font-size:29px;
  letter-spacing:-.9px
}
.overview-banner {
  display:flex;
  align-items:center;
  gap:19px;
  padding:21px 25px;
  background:#edf2e4;
  border:1px solid #e3e9d9;
  border-radius:10px;
  margin-bottom:27px
}
.banner-symbol {
  font-size:40px;
  color:#6e875b;
  line-height:1.2
}
.overview-banner strong {
  font-size:13px;
  font-weight:550
}
.overview-banner p {
  font-size:11px;
  color:#8b947f;
  margin:5px 0 0
}
.overview-banner a {
  margin-left:auto;
  font-size:11px;
  color:#667c57;
  font-weight:550
}
.overview-banner a span {
  padding-left:7px
}
.filters {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px
}
.filters select {
  font-size:11px;
  padding:9px 13px;
  min-width:150px;
  width:auto;
  border-color:#e0e5da
}
.filter-note {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#899580
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:#6b915b;
  border-radius:100%
}
.metric-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:22px
}
.metric {
  background:white;
  border:1px solid #e1e6dc;
  border-radius:10px;
  padding:20px 20px 18px;
  min-width:0
}
.metric-label {
  font-size:11px;
  color:#788571;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.metric-label span {
  font-size:18px;
  color:#98a38d
}
.metric>strong {
  display:block;
  font-size:35px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-1.4px;
  margin:12px 0 10px
}
.metric strong em {
  font-style:normal;
  font-size:25px
}
.metric small {
  color:#9aa18f;
  font-size:9px
}
.panel {
  background:#fff;
  border:1px solid #e1e6dc;
  border-radius:11px;
  min-width:0
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:24px 24px 13px
}
.panel-heading p {
  font-size:10px;
  color:#919b89;
  margin:5px 0 0
}
.panel-heading h2 {
  font-size:14px;
  font-weight:550;
  margin:0
}
.chart-grid {
  display:grid;
  grid-template-columns:minmax(0,2.5fr) minmax(235px,1fr);
  gap:20px;
  margin-bottom:24px
}
.legend {
  display:flex;
  gap:15px;
  font-size:9px;
  color:#8c9982;
  white-space:nowrap
}
.legend span {
  display:inline-flex;
  align-items:center;
  gap:5px
}
.legend i {
  width:6px;
  height:6px;
  border-radius:50%
}
.legend-green {
  background:#5d7e42
}
.legend-sage {
  background:#c2d0ad
}
.chart {
  padding:16px 20px 0;
  min-height:200px
}
.chart svg {
  display:block;
  width:100%;
  height:auto
}
.chart-gridline {
  stroke:#edf0e9;
  stroke-width:1;
  stroke-dasharray:3 5
}
.chart-label {
  font-size:10px;
  fill:#a0a895
}
.chart-line {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.5
}
.chart-visits {
  stroke:#62834a
}
.chart-opens {
  stroke:#bdcba9;
  stroke-width:2
}
.chart-fill {
  fill:#eef3e8;
  opacity:.7
}
.chart-hit {
  fill:transparent
}
.chart-hit:hover {
  fill:#7b9561
}
.chart-table {
  padding:0 24px 12px;
  font-size:10px;
  color:#819074
}
.chart-table summary {
  cursor:pointer
}
.chart-table .table-wrap {
  max-height:250px;
  overflow:auto
}
.journey-panel {
  background:#f3f5eb;
  padding:23px 23px 19px;
  overflow:hidden
}
.journey-panel .eyebrow {
  font-size:8px
}
.journey-panel h2 {
  font-size:18px;
  font-weight:500;
  line-height:1.4;
  margin-top:9px
}
.card-illustration {
  height:126px;
  display:grid;
  place-items:center;
  margin:0
}
.mock-nfc {
  width:161px;
  height:99px;
  border-radius:7px;
  background:#35523d;
  color:#eaf0dc;
  transform:rotate(-9deg);
  box-shadow:5px 10px 15px #273e231c;
  padding:12px;
  position:relative
}
.mock-nfc>span:first-child {
  font-size:9px;
  font-weight:600;
  letter-spacing:-.4px
}
.mock-nfc strong {
  display:block;
  font-size:12px;
  line-height:1.2;
  margin-top:7px;
  font-weight:500
}
.mock-nfc .nfc-waves {
  position:absolute;
  right:12px;
  top:12px;
  font-size:9px;
  letter-spacing:-1px
}
.mock-nfc small {
  display:block;
  font-size:5px;
  letter-spacing:1px;
  margin-top:11px
}
.touchpoint-stats {
  display:flex;
  gap:36px;
  padding-bottom:13px;
  border-bottom:1px solid #e1e6d6;
  margin:2px 0 10px
}
.touchpoint-stats strong {
  font-size:22px;
  display:block;
  line-height:1.3;
  font-weight:500
}
.touchpoint-stats span {
  font-size:9px;
  color:#98a18b
}
.journey-panel>.text-link {
  font-size:10px;
  justify-content:space-between;
  width:100%
}
.table-wrap {
  overflow:auto
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:11px
}
th {
  font-size:9px;
  font-weight:500;
  letter-spacing:.15px;
  color:#98a28e;
  background:#fcfdf9;
  padding:12px 23px;
  border-bottom:1px solid #e9ece4;
  white-space:nowrap
}
td {
  padding:17px 23px;
  border-bottom:1px solid #edf0e9;
  color:#86927c;
  font-size:10px
}
td strong {
  font-weight:500;
  color:#4e6343
}
tr:last-child td {
  border-bottom:0
}
.table-icon {
  display:inline-grid;
  place-items:center;
  background:#f2f5eb;
  width:26px;
  height:27px;
  border:1px solid #e8ecdf;
  border-radius:6px;
  color:#9ba98b;
  margin-right:8px;
  font-size:15px
}
.badge {
  display:inline-flex;
  align-items:center;
  border:1px solid #dde7cf;
  border-radius:5px;
  padding:3px 7px;
  font-size:9px;
  color:#6b8b4f;
  background:#f2f7e9;
  white-space:nowrap
}
.badge:before {
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  margin-right:5px
}
.badge.muted {
  color:#9a9d94;
  border-color:#e7e8e2;
  background:#f6f7f2
}
.data-note {
  font-size:10px;
  color:#929c87;
  line-height:1.7;
  margin:18px 0 8px
}
.data-note a,.privacy-small a {
  text-decoration:underline;
  text-underline-offset:3px
}
.app-footer {
  display:flex;
  justify-content:space-between;
  padding:20px 39px 25px;
  font-size:9px;
  color:#a2aa98;
  max-width:1500px;
  margin:0 auto
}
.empty-state {
  text-align:center;
  padding:45px 25px
}
.empty-state>span {
  display:block;
  font-size:35px;
  color:#789760;
  margin-bottom:10px
}
.empty-state h2,.empty-state h3 {
  font-size:19px;
  color:#425936
}
.empty-state p {
  font-size:12px;
  max-width:430px;
  margin:0 auto 20px
}
.empty-state.wide {
  grid-column:1/-1
}
.location-grid,.card-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:23px
}
.location-card {
  overflow:hidden
}
.location-art {
  height:127px;
  background:radial-gradient(ellipse at 70% 130%,#d5e1c7 0,transparent 60%),#eef2e6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px
}
.location-art>span {
  font-size:46px;
  color:#81956b
}
.location-art small {
  color:#7c8d6c;
  border:1px solid #c8d5ba;
  border-radius:20px;
  padding:5px 12px;
  background:#f6f8f155
}
.location-body,.card-body {
  padding:25px
}
.title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.title-row h2 {
  margin:0
}
.location-body>p {
  font-size:12px;
  margin:12px 0 22px
}
.location-meta {
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-top:1px solid #edf0e7;
  font-size:11px;
  color:#81916e;
  margin-bottom:13px
}
.inline-callout {
  display:flex;
  align-items:center;
  gap:20px;
  border:1px solid #e0e6d6;
  background:#f0f4e8;
  border-radius:9px;
  padding:24px;
  margin-top:27px
}
.inline-callout>span {
  font-size:27px;
  color:#7f956b
}
.inline-callout strong {
  font-size:13px
}
.inline-callout p {
  font-size:12px;
  margin:4px 0 0
}
.inline-callout>a {
  margin-left:auto
}
.physical-card {
  overflow:hidden
}
.card-cover {
  background:#34523e;
  color:#edf3e6;
  padding:25px 29px
}
.physical-card:nth-child(even) .card-cover {
  background:#e2e8d6;
  color:#4e6343
}
.card-cover>div {
  display:flex;
  justify-content:space-between;
  margin-bottom:30px;
  font-size:19px;
  letter-spacing:-.7px;
  font-weight:550
}
.card-cover h2 {
  font-size:23px;
  font-weight:500
}
.card-cover p {
  color:inherit;
  opacity:.65;
  font-size:12px;
  margin:0 0 18px
}
.card-cover small {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  opacity:.8
}
.nfc-waves {
  letter-spacing:-3px
}
.card-body .title-row small {
  color:#9ca490;
  font-size:10px
}
.link-label {
  display:block;
  font-size:9px;
  letter-spacing:1px;
  color:#93a082;
  margin-top:19px
}
.copy-field {
  display:flex;
  align-items:center;
  border:1px solid #e1e6da;
  border-radius:7px;
  margin:6px 0 17px;
  background:#fbfcf8
}
.copy-field input {
  border:0;
  background:transparent;
  font-size:10px;
  padding:11px
}
.card-body .text-link {
  margin-left:auto
}
.form-page {
  max-width:640px;
  margin:65px auto;
  padding:0 25px
}
.form-page>.wordmark {
  margin-bottom:35px
}
.form-page h1 {
  font-size:35px
}
.form-page .subtitle {
  margin-bottom:28px
}
.form-panel {
  padding:29px
}
.form-panel input:not([type=checkbox]) {
  display:block
}
.form-panel .button {
  margin-top:10px
}
.helptext {
  display:block;
  font-size:11px;
  color:#93a087;
  margin-top:6px
}
.helptext ul {
  padding-left:17px
}
.errorlist {
  list-style:none;
  padding:0;
  font-size:12px;
  color:#ad6054
}
.simple-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 6vw;
  border-bottom:1px solid #e3e8d9;
  background:#fdfefa
}
.simple-header>a:last-child {
  font-size:12px;
  color:#879776
}
.review-summary {
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:20px;
  margin-bottom:23px
}
.review-summary .panel {
  padding:28px
}
.review-summary strong {
  display:block;
  font-size:44px;
  font-weight:450;
  letter-spacing:-2px;
  margin:15px 0 6px
}
.review-summary strong em {
  font-size:29px;
  font-style:normal;
  color:#c2a659;
  letter-spacing:0
}
.review-summary p {
  font-size:11px;
  margin-bottom:0
}
.review-source h3 {
  font-size:15px;
  margin:7px 0
}
.google-letter {
  font-size:21px;
  font-weight:650;
  color:#5b7970
}
.review-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-bottom:25px
}
.review-item {
  padding:26px
}
.review-author {
  display:flex;
  align-items:center;
  gap:11px
}
.review-author strong {
  font-size:12px;
  display:block
}
.review-author small {
  font-size:10px;
  color:#96a087;
  display:block
}
.stars {
  color:#b79f5d;
  font-size:13px;
  letter-spacing:1px;
  margin-left:auto
}
.review-item>p {
  font-size:13px;
  color:#718365;
  margin:19px 0 0;
  white-space:pre-wrap
}
.review-reply {
  background:#f6f8f0;
  padding:16px;
  border-radius:7px;
  margin-top:20px
}
.review-reply strong {
  font-size:11px
}
.review-reply p {
  font-size:12px;
  margin:6px 0 0;
  white-space:pre-wrap
}
.settings-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:23px
}
.settings-panel {
  padding:27px;
  margin-bottom:25px
}
.settings-panel>p {
  font-size:12px;
  margin:15px 0 23px;
  max-width:700px
}
.settings-panel .panel-heading {
  padding:0 0 17px
}
.settings-panel th,.settings-panel td {
  padding-left:0;
  padding-right:25px
}
.invite-form {
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid #e7eddf
}
.invite-form p {
  margin:0;
  flex:1;
  min-width:0
}
.invite-form label {
  font-size:11px
}
.invite-form input,.invite-form select {
  font-size:12px
}
.switch-form {
  margin-top:25px
}
.switch-form label {
  display:block;
  font-size:11px
}
.switch-form select {
  margin:7px 0 10px;
  font-size:12px
}
.message {
  border:1px solid #dce5cd;
  border-radius:8px;
  background:#eff5e6;
  color:#637c4c;
  padding:14px 18px;
  font-size:12px;
  margin:0 0 20px
}
.message.error,.form-error {
  background:#fcf3ed;
  border-color:#efdacf;
  color:#a0614b
}
.messages {
  margin-bottom:25px
}
.prose h2 {
  margin-top:35px;
  font-size:21px
}
.prose p {
  font-size:14px;
  line-height:1.85
}
.prose {
  max-width:770px;
  padding-bottom:60px
}
.prose a {
  text-decoration:underline
}
.tap-page {
  background:radial-gradient(ellipse at 50% 0,#edf1e3,transparent 550px),#f8f9f4;
  min-height:100vh
}
.tap-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 40px
}
.tap-header>span {
  font-size:11px;
  color:#919c83
}
.tap-main {
  max-width:655px;
  padding:12px 25px 35px;
  margin:auto;
  text-align:center
}
.tap-business-icon {
  width:66px;
  height:66px;
  border:1px solid #dee6d0;
  border-radius:20px;
  background:#e8eeda;
  color:#7d9564;
  display:grid;
  place-items:center;
  font-size:33px;
  margin:0 auto 22px
}
.tap-main h1 {
  font-size:34px;
  line-height:1.3;
  margin-bottom:15px;
  font-weight:500;
  letter-spacing:-.9px
}
.tap-intro {
  font-size:13px;
  line-height:1.8;
  margin-bottom:30px
}
.tap-form-panel {
  text-align:left;
  padding:30px;
  border-color:#e2e8d9;
  box-shadow:0 8px 30px #40502c05
}
.tap-form-panel .title-row {
  margin-bottom:29px
}
.tap-form-panel h2 {
  font-size:15px
}
.tap-form-panel select {
  width:auto;
  padding:8px;
  font-size:10px
}
.tap-form-panel legend,.tap-form-panel label {
  font-size:12px
}
.rating-options {
  display:flex;
  gap:10px
}
.rating-options label {
  flex:1;
  position:relative
}
.rating-options input,.aspect-options input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.rating-options span {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #dfe5d7;
  border-radius:8px;
  padding:11px 0;
  background:#fcfdf9;
  color:#7b8b6c;
  font-size:14px;
  cursor:pointer
}
.rating-options b {
  font-size:18px;
  font-weight:400;
  color:#bdc8ae
}
.rating-options input:checked+span {
  border-color:#587b42;
  background:#edf3e4;
  color:#405b30
}
.rating-options input:checked+span b {
  color:#809955
}
.rating-options input:focus-visible+span,.aspect-options input:focus-visible+span {
  outline:3px solid #9bba82;
  outline-offset:2px
}
.rating-labels {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#99a38c;
  margin-top:8px
}
.aspect-options {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.aspect-options label {
  position:relative
}
.aspect-options span {
  display:inline-block;
  font-size:11px;
  padding:7px 12px;
  border:1px solid #e1e6d8;
  border-radius:20px;
  color:#879776;
  cursor:pointer
}
.aspect-options input:checked+span {
  border-color:#7d9a63;
  background:#edf4e4;
  color:#587342
}
.aspect-options.negative input:checked+span {
  border-color:#beab87;
  background:#f6f1e6;
  color:#8d7855
}
.tap-form-panel textarea {
  font-size:12px;
  line-height:1.7;
  border-color:#dfe6d5;
  background:#fdfefb
}
.draft-hint {
  font-size:10px;
  color:#9ba68b;
  line-height:1.7;
  margin:10px 0 20px
}
.draft-result {
  padding-top:29px;
  margin-top:25px;
  border-top:1px solid #e6ebdd
}
.draft-result textarea {
  margin:9px 0 15px
}
.draft-result .title-row {
  margin-bottom:14px
}
.draft-result label {
  color:#8c9a7b;
  font-size:11px
}
.tap-divider {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:10px;
  color:#a4ae95;
  margin:23px 0
}
.tap-divider:before,.tap-divider:after {
  content:'';
  height:1px;
  flex:1;
  background:#e9eddf
}
.google-button {
  color:#516547;
  background:white;
  border-color:#dfe5d6;
  justify-content:space-between
}
.google-button:hover {
  background:#f6f8f0
}
.tap-footnote {
  text-align:center;
  font-size:10px;
  line-height:1.7;
  color:#a0aa93;
  margin:13px 0 0
}
.privacy-small {
  font-size:10px;
  color:#99a68a;
  margin:21px 0
}
.tap-footer {
  display:flex;
  justify-content:space-between;
  padding:25px 40px;
  font-size:10px;
  color:#9eaa8e
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  padding:13px 22px;
  border-radius:9px;
  background:#2b4534;
  color:white;
  box-shadow:0 8px 30px #293f2a30;
  z-index:50;
  max-width:90vw;
  text-align:center;
  font-size:12px
}
.form-error {
  padding:12px;
  border-radius:7px;
  font-size:12px;
  margin:15px 0 0
}
.marketing-page {
  background:#f8f9f2
}
.marketing-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:31px 7vw;
  max-width:1500px;
  margin:auto
}
.marketing-header nav {
  display:flex;
  gap:35px;
  font-size:12px;
  color:#7c8b6d
}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:50px;
  padding:70px 7vw 95px;
  max-width:1500px;
  margin:auto;
  align-items:center
}
.hero h1 {
  font-size:70px;
  line-height:1.07;
  letter-spacing:-3px;
  font-weight:480;
  color:#2f4b34;
  margin:20px 0 25px
}
.hero h1 .serif {
  color:#819367
}
.hero>div>p:not(.eyebrow) {
  font-size:15px;
  line-height:1.8;
  max-width:420px;
  margin-bottom:29px;
  color:#8f9b81
}
.hero .eyebrow {
  font-size:10px;
  letter-spacing:2px
}
.hero-proof {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#96a285;
  margin-top:28px
}
.hero-proof span {
  font-size:20px;
  color:#82985f
}
.hero-art {
  position:relative;
  min-height:440px;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 50% 50%,#e6ecd9 0,transparent 65%)
}
.orbit {
  border:1px solid #e1e8d6;
  border-radius:50%;
  position:absolute;
  width:390px;
  height:390px
}
.orbit-two {
  width:480px;
  height:480px
}
.hero-card {
  width:325px;
  height:230px;
  background:#35573e;
  border:1px solid #436249;
  border-radius:15px;
  transform:rotate(-11deg);
  box-shadow:15px 27px 36px #30442a28;
  color:#e4eddb;
  z-index:1;
  padding:28px
}
.hero-card>div:first-child {
  display:flex;
  justify-content:space-between;
  font-size:17px;
  letter-spacing:-.6px;
  margin-bottom:25px
}
.hero-card h2 {
  font-size:27px;
  line-height:1.05;
  font-weight:450;
  letter-spacing:-1px;
  margin-bottom:7px
}
.hero-card p {
  font-size:10px;
  color:#abc399
}
.hero-card-bottom {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:16px
}
.hero-card-bottom>span {
  font-size:24px
}
.hero-card-bottom small {
  font-size:6px;
  line-height:1.5;
  letter-spacing:1.3px
}
.hero-card-bottom strong {
  margin-left:auto;
  font-size:21px;
  font-weight:400
}
.floating-note {
  position:absolute;
  bottom:35px;
  left:18px;
  z-index:2;
  display:flex;
  gap:12px;
  align-items:center;
  padding:17px 22px;
  border-radius:10px;
  border:1px solid #dfe7d4;
  background:#fffff7;
  box-shadow:0 8px 20px #4254330b;
  transform:rotate(3deg)
}
.floating-note>span {
  font-size:27px;
  color:#a9b384
}
.floating-note strong {
  display:block;
  font-size:11px;
  font-weight:550
}
.floating-note small {
  font-size:9px;
  color:#97a284
}
.hero-spark {
  position:absolute;
  top:8px;
  right:20px;
  font-size:77px;
  color:#aebe93;
  line-height:1
}
.how-section {
  padding:65px 7vw 75px;
  background:#eef2e5;
  border-top:1px solid #e2e9d6
}
.section-title {
  max-width:1300px;
  margin:auto
}
.section-title h2 {
  font-size:32px;
  font-weight:450;
  letter-spacing:-1px;
  margin:0 0 45px
}
.three-columns {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:55px;
  max-width:1300px;
  margin:auto
}
.three-columns article {
  border-top:1px solid #d8e2cb;
  padding-top:20px
}
.three-columns article>span {
  font-size:9px;
  letter-spacing:1.6px;
  color:#8c9f73
}
.three-columns h3 {
  font-size:18px;
  font-weight:500;
  margin:15px 0 12px
}
.three-columns p {
  font-size:12px;
  line-height:1.8;
  margin:0;
  color:#96a183
}
.marketing-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:32px 7vw;
  font-size:10px;
  color:#9ca889
}
.marketing-footer .wordmark {
  font-size:20px
}
.auth-layout {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr
}
.auth-art {
  background:#2f4f39;
  color:#dae7ce;
  padding:45px 50px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.wordmark.light {
  color:#e9f1e0
}
.wordmark.light .logo-mark {
  background:#dce8ce;
  color:#426033
}
.auth-art h1 {
  font-size:46px;
  font-weight:450;
  line-height:1.2;
  letter-spacing:-1.8px
}
.auth-art .serif {
  color:#a1b98e
}
.auth-art p {
  font-size:14px;
  line-height:1.9;
  color:#8da67b
}
.auth-art>small {
  font-size:8px;
  letter-spacing:1.6px;
  color:#99b286
}
.auth-spark {
  display:block;
  font-size:75px;
  line-height:1;
  margin-bottom:30px;
  color:#a4bc8f
}
.auth-form {
  max-width:410px;
  width:100%;
  padding:35px;
  margin:auto
}
.auth-form h1 {
  font-size:38px
}
.auth-form>p:not(.eyebrow) {
  font-size:13px
}
.auth-form form {
  margin-top:28px
}
.auth-form label {
  font-size:12px
}
.auth-form input {
  font-size:13px;
  margin-top:4px
}
.auth-form .button {
  margin-top:8px
}
.forgot-link {
  display:block;
  text-align:center;
  font-size:11px;
  color:#85996f;
  margin-top:19px
}
.auth-form .privacy-small {
  font-size:10px!important;
  text-align:center;
  margin-top:35px
}
.mobile-brand {
  display:none
}
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
[hidden] {
  display:none!important
}
@media(min-width:1600px) {
  .workspace-main main {
    padding-top:45px
  }
  .page-heading h1 {
    font-size:34px
  }
  .metric>strong {
    font-size:40px
  }
  .panel-heading h2 {
    font-size:16px
  }
  .chart-grid {
    grid-template-columns:2.7fr 1fr
  }
  .card-illustration {
    height:150px
  }
  .mock-nfc {
    transform:rotate(-9deg) scale(1.15)
  }
}
@media(max-width:1150px) {
  .sidebar {
    width:205px;
    padding-left:14px;
    padding-right:14px
  }
  .workspace-main {
    margin-left:205px
  }
  .workspace-main main {
    padding:28px 25px 15px
  }
  .topbar {
    padding:0 25px
  }
  .page-heading h1 {
    font-size:25px
  }
  .metric {
    padding:17px 14px
  }
  .metric small {
    font-size:8px
  }
  .chart-grid {
    grid-template-columns:minmax(0,1fr) 235px;
    gap:14px
  }
  .panel-heading {
    padding:20px 17px 12px
  }
  .panel-heading .legend {
    gap:8px
  }
  .panel-heading h2 {
    font-size:13px
  }
  .hero h1 {
    font-size:57px
  }
  .hero {
    gap:30px;
    padding-left:6vw;
    padding-right:6vw
  }
  .orbit {
    width:310px;
    height:310px
  }
  .orbit-two {
    width:380px;
    height:380px
  }
  .hero-card {
    width:285px;
    height:220px
  }
  .review-summary {
    gap:12px
  }
  .review-summary .panel {
    padding:20px
  }
  .settings-grid {
    grid-template-columns:1fr
  }
  .location-grid,.card-grid {
    gap:15px
  }
  .location-body,.card-body {
    padding:19px
  }
  .card-body .title-row {
    align-items:flex-start;
    flex-direction:column;
    gap:5px
  }
}
@media(max-width:900px) {
  .metric-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .chart-grid {
    grid-template-columns:1fr
  }
  .journey-panel {
    display:none
  }
  .page-heading {
    align-items:flex-start
  }
  .page-heading>.button {
    padding:9px 12px;
    font-size:11px
  }
  .page-heading h1 {
    font-size:24px
  }
  .overview-banner {
    padding:17px;
    gap:12px
  }
  .overview-banner a {
    display:none
  }
  .filter-note {
    display:none
  }
  .review-summary {
    grid-template-columns:1fr 1fr
  }
  .review-source {
    grid-column:1/-1
  }
  .review-list,.location-grid,.card-grid {
    grid-template-columns:1fr
  }
  .invite-form {
    flex-wrap:wrap
  }
  .invite-form .button {
    width:100%
  }
  .hero h1 {
    font-size:46px
  }
  .hero-art {
    min-height:360px
  }
  .hero-card {
    width:235px;
    height:185px;
    padding:22px
  }
  .hero-card h2 {
    font-size:22px
  }
  .hero-card>div:first-child {
    margin-bottom:16px;
    font-size:13px
  }
  .hero-card-bottom {
    margin-top:6px
  }
  .orbit {
    width:260px;
    height:260px
  }
  .orbit-two {
    width:320px;
    height:320px
  }
  .floating-note {
    left:-20px;
    bottom:20px;
    padding:13px 16px
  }
  .hero-spark {
    right:-10px;
    font-size:65px
  }
  .auth-art {
    padding:35px
  }
  .auth-art h1 {
    font-size:35px
  }
  .auth-art>small {
    font-size:6px
  }
}
@media(max-width:680px) {
  .sidebar {
    position:static;
    width:100%;
    padding:16px;
    border-right:0;
    border-bottom:1px solid #e0e7d8;
    display:block
  }
  .app-shell {
    display:block
  }
  .sidebar>.wordmark {
    margin-bottom:16px;
    padding-left:0;
    font-size:23px
  }
  .sidebar .logo-mark {
    width:27px;
    height:27px;
    font-size:26px
  }
  .workspace-pill,.nav-label,.sidebar-bottom {
    display:none
  }
  .sidebar nav {
    display:flex;
    flex-direction:row;
    gap:5px;
    overflow:auto
  }
  .sidebar nav a {
    white-space:nowrap;
    font-size:10px;
    padding:8px 10px;
    gap:6px
  }
  .sidebar nav a span {
    font-size:17px;
    width:15px
  }
  .workspace-main {
    margin:0
  }
  .topbar {
    height:46px;
    padding:0 18px;
    font-size:10px
  }
  .workspace-main main {
    padding:25px 18px 10px
  }
  .page-heading {
    display:block;
    margin-bottom:23px
  }
  .page-heading h1 {
    font-size:27px;
    max-width:380px;
    line-height:1.25
  }
  .page-heading .eyebrow {
    font-size:9px
  }
  .page-heading>.button {
    margin-top:18px
  }
  .page-heading p:not(.eyebrow) {
    font-size:11px
  }
  .overview-banner {
    padding:16px;
    margin-bottom:22px;
    gap:13px
  }
  .overview-banner strong {
    font-size:11px
  }
  .overview-banner p {
    font-size:9px
  }
  .banner-symbol {
    font-size:29px
  }
  .filters {
    gap:7px
  }
  .filters select {
    min-width:0;
    max-width:150px;
    font-size:10px;
    padding:9px
  }
  .filters .button {
    padding:8px 10px;
    font-size:10px
  }
  .metric-grid {
    gap:10px;
    margin-bottom:17px
  }
  .metric {
    padding:17px 14px
  }
  .metric-label {
    font-size:10px
  }
  .metric>strong {
    font-size:31px;
    margin:7px 0
  }
  .metric small {
    font-size:8px;
    display:block;
    line-height:1.6
  }
  .chart {
    padding:10px 8px 0;
    min-height:130px
  }
  .panel-heading {
    padding:18px 16px 12px
  }
  .panel-heading p {
    font-size:9px
  }
  .panel-heading .text-link {
    font-size:9px;
    white-space:nowrap
  }
  .legend {
    font-size:8px
  }
  .chart-table {
    padding:2px 16px 14px
  }
  .table-wrap table {
    min-width:450px
  }
  th {
    padding:11px 15px
  }
  td {
    padding:13px 15px
  }
  .data-note {
    font-size:9px
  }
  .app-footer {
    padding:20px 18px;
    font-size:8px
  }
  .app-footer span:last-child {
    display:none
  }
  .empty-state {
    padding:32px 15px
  }
  .location-grid,.card-grid {
    gap:18px
  }
  .inline-callout {
    padding:19px;
    gap:13px;
    flex-wrap:wrap
  }
  .inline-callout>span {
    display:none
  }
  .inline-callout>a {
    margin:0
  }
  .inline-callout p {
    font-size:11px
  }
  .card-body .title-row {
    flex-direction:row;
    align-items:center
  }
  .form-page {
    margin:35px auto;
    padding:0 20px
  }
  .form-page h1 {
    font-size:29px
  }
  .form-panel {
    padding:22px
  }
  .simple-header {
    padding:20px
  }
  .simple-header>.wordmark {
    font-size:22px
  }
  .simple-header>a:last-child {
    font-size:10px
  }
  .settings-panel {
    padding:20px
  }
  .settings-panel .title-row {
    align-items:flex-start
  }
  .settings-panel .title-row h2 {
    font-size:16px
  }
  .invite-form p {
    flex-basis:100%
  }
  .review-summary strong {
    font-size:34px
  }
  .review-summary p {
    font-size:10px
  }
  .review-summary .eyebrow {
    font-size:8px
  }
  .review-item {
    padding:21px
  }
  .tap-header {
    padding:20px
  }
  .tap-header .wordmark {
    font-size:22px
  }
  .tap-header>span {
    font-size:8px
  }
  .tap-main {
    padding:10px 15px 20px
  }
  .tap-main h1 {
    font-size:28px
  }
  .tap-intro {
    font-size:11px;
    margin-bottom:22px
  }
  .tap-intro br {
    display:none
  }
  .tap-business-icon {
    width:55px;
    height:55px;
    border-radius:16px;
    font-size:28px;
    margin-bottom:17px
  }
  .tap-form-panel {
    padding:23px 19px
  }
  .tap-form-panel .title-row {
    gap:8px
  }
  .tap-form-panel h2 {
    font-size:13px
  }
  .tap-form-panel select {
    font-size:9px
  }
  .rating-options {
    gap:7px
  }
  .aspect-options {
    gap:7px
  }
  .aspect-options span {
    padding:7px 10px;
    font-size:10px
  }
  .tap-footer {
    padding:20px;
    font-size:8px;
    flex-wrap:wrap;
    gap:12px
  }
  .tap-page .eyebrow {
    font-size:9px
  }
  .marketing-header {
    padding:24px
  }
  .marketing-header .wordmark {
    font-size:24px
  }
  .marketing-header nav {
    gap:17px;
    font-size:11px
  }
  .marketing-header nav>a:first-child {
    display:none
  }
  .hero {
    display:block;
    padding:35px 25px 35px
  }
  .hero h1 {
    font-size:56px;
    letter-spacing:-2.5px;
    line-height:1.06
  }
  .hero>div>p:not(.eyebrow) {
    font-size:13px;
    max-width:345px
  }
  .hero .eyebrow {
    font-size:8px
  }
  .hero .button {
    font-size:12px
  }
  .hero .text-link {
    font-size:11px
  }
  .hero-art {
    min-height:375px;
    margin:25px auto 0;
    max-width:370px
  }
  .hero-card {
    width:275px;
    height:207px;
    padding:25px
  }
  .hero-card h2 {
    font-size:27px
  }
  .hero-card>div:first-child {
    font-size:15px;
    margin-bottom:18px
  }
  .hero-card-bottom {
    margin-top:14px
  }
  .orbit {
    width:285px;
    height:285px
  }
  .orbit-two {
    width:350px;
    height:350px
  }
  .floating-note {
    left:0;
    bottom:15px
  }
  .hero-spark {
    right:7px;
    top:9px
  }
  .how-section {
    padding:42px 25px
  }
  .section-title h2 {
    font-size:27px;
    margin-bottom:30px
  }
  .three-columns {
    grid-template-columns:1fr;
    gap:27px
  }
  .three-columns h3 {
    font-size:18px
  }
  .three-columns p {
    font-size:12px
  }
  .marketing-footer {
    padding:27px 25px;
    gap:20px;
    font-size:9px
  }
  .marketing-footer>span:nth-child(2) {
    display:none
  }
  .auth-layout {
    display:block
  }
  .auth-art {
    display:none
  }
  .auth-form {
    padding:45px 28px;
    max-width:410px
  }
  .mobile-brand {
    display:inline-flex;
    margin-bottom:60px
  }
  .auth-form h1 {
    font-size:35px
  }
  .prose {
    padding-bottom:40px
  }
  .prose h2 {
    font-size:19px
  }
  .prose p {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important;
    animation:none!important
  }
}

/* A compact clipboard step, without a rating or personalization form. */
.clipboard-page {
  max-width: 470px;
  padding: 30px 18px;
  margin: 0 auto;
  text-align: center;
}
.clipboard-page > .wordmark { margin: 5px 0 30px; }
.clipboard-panel { padding: 30px 24px; }
.clipboard-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #eaf0e0;
  color: #537646;
  font-size: 28px;
  margin-bottom: 18px;
}
.clipboard-panel h1 { font-size: 28px; letter-spacing: -.8px; }
.clipboard-intro {
  font-size: 17px;
  line-height: 1.6;
  color: #485743;
  margin: 10px 0 20px;
  font-weight: 450;
}
.gmaps-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #dce2d6;
  border-radius: 999px;
  padding: 3px 12px 3px 8px;
  margin: 0 2px;
  vertical-align: middle;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  transition: all .2s ease;
}
.gmaps-pill:hover {
  border-color: #c4cdc0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09);
}
.gmaps-logo-svg {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 21px;
}
.gmaps-text {
  font-size: 15px;
  font-weight: 600;
  color: #202124;
  letter-spacing: -0.2px;
}
.clipboard-panel label { display: block; text-align: left; font-size: 12px; margin: 25px 0 9px; }
.clipboard-panel textarea { font-size: 14px; line-height: 1.7; background: #fafcf7; padding: 14px; }
.clipboard-note { font-size: 11px; line-height: 1.7; color: #69775f; margin: 12px 0 22px; }
.clipboard-status { color: #3a6132; background: #edf4e5; padding: 13px; border-radius: 7px; font-size: 13px; margin: 16px 0 0; }
.clipboard-skip { display: inline-block; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: #64755b; margin-top: 22px; }

/* Star rating widget */
.star-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 14px 0 20px;
}
.star-btn {
  background: transparent;
  border: none;
  font-size: 34px;
  line-height: 1;
  color: #d2dbce;
  cursor: pointer;
  padding: 4px;
  transition: transform .12s, color .15s;
  outline: none;
}
.star-btn:hover {
  transform: scale(1.18);
}
.star-btn.active {
  color: #df9e28;
}

/* Server selector */
.server-picker-row {
  text-align: left;
  margin-bottom: 20px;
}
.server-picker-row label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  margin-bottom: 6px;
}
.server-select-wrap select {
  font-size: 13px;
  background: #fafcf7;
}
.custom-server-input {
  margin-top: 8px;
  font-size: 13px;
}

/* Review preview & refresh header */
.review-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 8px;
}
.review-label-row label {
  margin: 0 !important;
  font-size: 12px;
  font-weight: 550;
}
.refresh-draft-btn {
  background: transparent;
  border: none;
  color: #5d7e42;
  font-size: 11px;
  font-weight: 550;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .12s;
}
.refresh-draft-btn:hover {
  background: #edf3e4;
}

/* Review input & Guest info section */
.review-input-section {
  text-align: left;
  margin-bottom: 18px;
}
.guest-info-section {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.field-group label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  margin-bottom: 5px;
}
.field-group input {
  font-size: 13px;
  background: #fafcf7;
}

/* Thank You screen */
.thank-you-panel {
  padding: 42px 28px;
}
.thank-you-icon {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #e4efe0;
  color: #3b7430;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}
.thank-you-message {
  font-size: 15px;
  line-height: 1.7;
  color: #3f4e3c;
  margin: 14px 0 10px;
}
.thank-you-sub {
  font-size: 12px;
  line-height: 1.6;
  color: #75836d;
  margin-bottom: 26px;
}
.thank-you-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Badges & Dashboard Feedback view */
.badge.coral {
  background: #fae8e6;
  color: #af3e38;
  border-color: #f3cdc8;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.data-table th {
  padding: 12px 18px;
  background: #fcfdf9;
  font-size: 10px;
  font-weight: 600;
  color: #7b8871;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e9ece4;
  white-space: nowrap;
}
.data-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #edf0e9;
  vertical-align: middle;
  font-size: 11px;
}
.data-table tr:hover td {
  background: #fafbf8;
}
.server-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 550;
  color: #3e5e34;
  background: #edf4e7;
  padding: 3px 8px;
  border-radius: 6px;
}
.feedback-highlight {
  background: #fff8f5;
  border-left: 3px solid #df6854;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
}
.feedback-highlight p {
  margin: 4px 0 0;
  color: #4a3632;
}
.draft-highlight {
  font-size: 12px;
  line-height: 1.5;
}
.draft-highlight p {
  margin: 4px 0 0;
  color: #364434;
}

/* Sign out actions */
.signout-btn {
  border: 1px solid #d4d8ce;
  background: #f7f9f3;
  color: #637059;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 550;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.signout-btn:hover {
  background: #ffffff;
  color: #ba3d35;
  border-color: #f0c5c1;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-divider {
  color: #c5cbbe;
}
.topbar-signout-btn {
  border: 1px solid #d8ddd3;
  background: #fdfefa;
  color: #637059;
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 550;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.topbar-signout-btn:hover {
  background: #fae8e6;
  color: #ba3d35;
  border-color: #f3cdc8;
}

/* Language Switcher Component */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  background: #f1f3ed;
  border: 1px solid #dce1d7;
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
}
.lang-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 14px;
  color: #697762;
  text-decoration: none;
  line-height: 1.2;
  transition: all .15s ease;
}
.lang-pill:hover {
  color: #213b32;
  background: rgba(255, 255, 255, 0.6);
}
.lang-pill.active {
  background: #ffffff;
  color: #213b32;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.customer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0 25px;
}
.customer-topbar .wordmark {
  margin: 0;
}
.customer-lang-switcher {
  background: #eef2e7;
  border-color: #dbe2d4;
}

/* Right-To-Left (RTL) Layout Support for Arabic */
[dir="rtl"] body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', 'DejaVu Sans', Tahoma, Arial, sans-serif;
}
[dir="rtl"] .sidebar {
  inset: 0 0 0 auto;
  border-right: none;
  border-left: 1px solid #e5e8df;
}
[dir="rtl"] .sidebar > .wordmark {
  padding-left: 0;
  padding-right: 13px;
}
[dir="rtl"] .workspace-main {
  margin-left: 0;
  margin-right: 231px;
}
[dir="rtl"] .user-line form,
[dir="rtl"] .overview-banner a,
[dir="rtl"] .filter-note,
[dir="rtl"] .inline-callout > a,
[dir="rtl"] .card-body .text-link,
[dir="rtl"] .stars,
[dir="rtl"] .hero-card-bottom strong {
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .help-link span,
[dir="rtl"] label small,
[dir="rtl"] legend small {
  margin-left: 0;
  margin-right: 8px;
}
[dir="rtl"] .server-picker-row,
[dir="rtl"] .review-input-section,
[dir="rtl"] .guest-info-section,
[dir="rtl"] .field-group {
  text-align: right;
}
[dir="rtl"] .table-wrap th,
[dir="rtl"] .table-wrap td {
  text-align: right;
}
[dir="rtl"] .custom-server-input,
[dir="rtl"] .guest-info-section input {
  text-align: right;
}
[dir="rtl"] #clipboard-review {
  direction: ltr;
  text-align: left;
}

@media(max-width:1150px) {
  [dir="rtl"] .workspace-main {
    margin-left: 0;
    margin-right: 205px;
  }
}
@media(max-width:680px) {
  [dir="rtl"] .sidebar {
    border-left: 0;
    border-bottom: 1px solid #e0e7d8;
  }
  [dir="rtl"] .workspace-main {
    margin-right: 0;
  }
}

@media(max-width:400px) {
  .clipboard-panel { padding: 25px 19px; }
  .clipboard-panel h1 { font-size: 25px; }
  .star-btn { font-size: 29px; }
}

/* ==========================================================================
   Digital Loyalty Pass & Wallet Styling
   ========================================================================== */
.loyalty-pass-container {
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}

.wallet-card {
  --card-accent: #213b32;
  --card-text: #ffffff;
  background: var(--card-accent);
  color: var(--card-text);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.wallet-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.wallet-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wallet-card-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: 0.8;
  display: block;
}

.wallet-card-title {
  font-size: 22px;
  font-weight: 700;
  margin: 2px 0 0;
  color: inherit;
}

.wallet-card-badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.wallet-card-reward-box {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(6px);
}

.reward-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
  margin-bottom: 2px;
}

.reward-text {
  font-size: 14px;
  font-weight: 600;
}

.wallet-stamps-section {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 14px;
  padding: 16px;
}

.wallet-stamps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.stamps-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stamps-count-pill {
  background: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.stamps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.stamp-slot {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}

.stamp-slot.earned {
  background: #ffffff;
  color: var(--card-accent);
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.stamp-slot.target-slot {
  border-color: rgba(255, 215, 0, 0.8);
}

.stamp-slot.target-slot.earned {
  background: #ffd700;
  color: #1a1a1a;
}

.progress-bar-container {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-bar-fill {
  height: 100%;
  background: #ffd700;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.reward-ready-banner {
  background: #ffd700;
  color: #1a1a1a;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  text-align: center;
  margin-top: 8px;
}

.reward-ready-banner p {
  margin: 2px 0 0;
  font-size: 11px;
}

.stamps-subtext {
  font-size: 11px;
  opacity: 0.85;
  margin: 0;
  text-align: center;
}

.wallet-qr-section {
  background: #ffffff;
  color: #18181b;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wallet-qr-box {
  background: #ffffff;
  padding: 6px;
  border-radius: 8px;
  display: inline-block;
}

.wallet-qr-img {
  width: 140px;
  height: 140px;
  display: block;
}

.wallet-member-code {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wallet-member-code small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #71717a;
}

.wallet-member-code code {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #18181b;
}

.wallet-guest-name {
  font-size: 13px;
  color: #52525b;
  margin: 0;
  font-weight: 500;
}

.wallet-actions-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wallet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.apple-wallet-btn {
  background: #000000;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.apple-wallet-btn:hover {
  background: #1a1a1a;
  color: #ffffff;
}

.google-wallet-btn {
  background: #ffffff;
  color: #3c4043;
  border: 1px solid #dadce0;
}

.google-wallet-btn:hover {
  background: #f8f9fa;
  color: #202124;
}

.wallet-card-footer {
  text-align: center;
}

.wallet-terms-note {
  font-size: 10px;
  opacity: 0.7;
  margin: 0;
}

/* Post-review loyalty claim box */
.loyalty-claim-card {
  background: var(--surface-2, #f5f7f2);
  border: 1px solid var(--border, #e0e7d8);
  border-radius: 14px;
  padding: 16px;
  margin: 20px 0;
  text-align: left;
}

.loyalty-claim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.loyalty-claim-badge {
  font-weight: 700;
  font-size: 13px;
  color: var(--text, #213b32);
}

.loyalty-claim-stamps {
  background: var(--brand-color, #213b32);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.loyalty-claim-body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.loyalty-claim-qr img {
  border-radius: 6px;
  border: 1px solid var(--border, #e0e7d8);
  background: #ffffff;
}

.loyalty-claim-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.loyalty-claim-name {
  font-size: 14px;
  color: var(--text, #18181b);
}

.loyalty-claim-code {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--brand-color, #213b32);
}

.loyalty-claim-reward {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 0;
}

.loyalty-claim-actions {
  display: flex;
  gap: 10px;
}

.wallet-btn.small {
  padding: 8px 14px;
  font-size: 12px;
}

/* RTL Support for loyalty pass and claim */
[dir="rtl"] .wallet-card-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .wallet-stamps-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .loyalty-claim-card {
  text-align: right;
}

[dir="rtl"] .loyalty-claim-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .loyalty-claim-body {
  flex-direction: row-reverse;
}