@import url("/fonts.css");
:root {
  --navy: #143b58;
  --navy-dark: #0f2b40;
  --green: #7eb943;
  --lime: #b9ed82;
  --ink: #173344;
  --muted: #62727b;
  --line: #e0e7e4;
  --cream: #f8faf6;
  --soft: #eff5e9;
  --white: #fff;
  --heading: "Manrope", "DM Sans", Arial, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button {
  border: none;
  background: none;
  color: inherit;
}
a,
button,
input,
select {
  outline-offset: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #77a83e;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-family: var(--heading);
  line-height: 1.17;
  letter-spacing: -0.045em;
  color: var(--ink);
}
h1 {
  font-size: clamp(42px, 5.1vw, 72px);
  font-weight: 650;
}
h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 650;
}
h3 {
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.035em;
}
p {
  color: var(--muted);
}
ul {
  padding: 0;
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}
.wrap {
  max-width: 1220px;
  width: calc(100% - 96px);
  margin: 0 auto;
}
.icon {
  flex-shrink: 0;
  vertical-align: middle;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border-radius: 9px;
  padding: 15px 22px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  border: 1px solid transparent;
  transition:
    transform 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  white-space: nowrap;
}
.button:hover {
  transform: translateY(-2px);
}
.button.primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 3px 0 #071f3210;
}
.button.primary:hover {
  background: #0d2a40;
  box-shadow: 0 5px 20px #12385520;
}
.button.outline {
  background: transparent;
  border-color: #cad6cd;
  color: var(--navy);
}
.button.outline:hover {
  background: #eef5e7;
}
.button.small {
  padding: 11px 16px;
  font-size: 13px;
  gap: 14px;
}
.button.full {
  width: 100%;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
}
.text-link:hover {
  color: #5c8e31;
}
.text-link span {
  font-size: 22px;
}
.fine {
  font-size: 12px;
  line-height: 1.7;
  color: #6d7c84;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #57754a;
}
.tiny-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.centered {
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.hidden {
  display: none !important;
}
.skip-link {
  position: fixed;
  top: -100px;
  background: var(--navy);
  color: #fff;
  padding: 12px;
  z-index: 100;
}
.skip-link:focus {
  top: 4px;
}
.boot {
  padding: 15vh 24px;
  text-align: center;
}
.boot img {
  width: 200px;
  margin: 0 auto 30px;
}
.boot p {
  margin: 20px 0;
}
.brand img {
  width: 156px;
  height: auto;
}
.site-header {
  height: 92px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: #ffffffed;
  position: relative;
  z-index: 5;
}
.desktop-nav {
  display: flex;
  gap: 28px;
  font-size: 13px;
  font-weight: 500;
}
.desktop-nav a:hover,
.nav-login:hover {
  color: #63973b;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 23px;
  font-size: 13px;
}
.currency {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.currency .icon {
  width: 15px;
}
.currency select {
  font-size: 12px;
  font-weight: 600;
  border: none;
  color: var(--ink);
  background: transparent;
  padding: 4px 2px;
  cursor: pointer;
  max-width: 80px;
}
.nav-login {
  white-space: nowrap;
}
.mobile-menu {
  display: none;
}
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
}
.icon-btn:hover {
  background: #edf2ed;
}
.mobile-nav {
  position: absolute;
  top: 76px;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  box-shadow: 0 12px 15px #143b5810;
  padding: 22px;
}
.mobile-nav a {
  display: block;
  padding: 10px;
}
.hero {
  padding-top: 40px;
  position: relative;
}
.hero:before {
  content: "";
  position: absolute;
  left: -90px;
  right: -90px;
  top: 0;
  height: 900px;
  background: radial-gradient(ellipse at 70% 65%, #f0f7e4 0, transparent 65%);
  z-index: -1;
  pointer-events: none;
}
.hero-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-side-note {
  font-size: 11px;
  line-height: 1.7;
  color: #819087;
}
.hero-copy {
  padding-top: 33px;
  max-width: 760px;
}
.hero h1 {
  line-height: 1.12;
}
.hero h1 span {
  color: #609336;
}
.hero-copy > p {
  font-size: 17px;
  line-height: 1.7;
  max-width: 590px;
  margin: 24px 0;
}
.hero-actions {
  display: flex;
  gap: 29px;
  align-items: center;
}
.hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 24px;
  font-size: 11px;
  color: #728077;
}
.hero-checks .icon {
  width: 14px;
  height: 14px;
  color: #719c49;
  margin-right: 4px;
}
.product-scene {
  position: relative;
  margin: 52px 0 0;
  padding: 0 65px 35px;
  isolation: isolate;
}
.product-window {
  border: 1px solid #dbe4d7;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 24px 65px #17334412,
    0 4px 14px #17334407;
  overflow: hidden;
}
.window-bar {
  height: 36px;
  background: #fcfcfb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: 1px solid #eaf0e6;
  color: #a1aaa5;
  font-size: 9px;
}
.window-bar > span:nth-child(2) {
  display: flex;
  gap: 5px;
  align-items: center;
}
.window-bar .icon {
  width: 10px;
  height: 10px;
}
.window-dots {
  display: flex;
  gap: 5px;
}
.window-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9e1d7;
}
.inbox-ui {
  display: grid;
  grid-template-columns: 54px 270px 1fr;
  height: 356px;
}
.mini-sidebar {
  border-right: 1px solid #e8ece7;
  background: #fbfcfa;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
  padding: 18px 0;
}
.mini-sidebar img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  margin-bottom: 9px;
}
.mini-sidebar > .icon {
  width: 16px;
  height: 16px;
  color: #8c9991;
}
.mini-sidebar .selected {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e8f1df;
  color: #608733;
  width: 31px;
  height: 30px;
  border-radius: 7px;
  margin-top: -8px;
  margin-bottom: -9px;
}
.mini-sidebar .selected .icon {
  width: 16px;
}
.mini-user {
  width: 23px;
  height: 23px;
  background: #d9e6ce;
  color: #62823e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  margin-top: auto;
}
.inbox-list {
  border-right: 1px solid #e8ece7;
  padding: 20px 0;
  overflow: hidden;
}
.inbox-title {
  font-size: 14px;
  font-weight: 700;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.count {
  font-size: 9px;
  background: #f2f4ef;
  padding: 0 5px;
  border-radius: 4px;
  color: #899480;
}
.mini-search {
  margin: 12px 15px;
  border: 1px solid #edf0e9;
  border-radius: 5px;
  padding: 4px 10px;
  color: #a0aaa1;
  font-size: 9px;
}
.mini-tabs {
  font-size: 9px;
  color: #8b998c;
  display: flex;
  gap: 20px;
  padding: 0 18px 9px;
}
.mini-tabs b {
  color: #557b33;
  border-bottom: 2px solid #80a950;
  padding-bottom: 6px;
}
.mini-contact {
  display: flex;
  gap: 9px;
  padding: 13px 15px;
  position: relative;
}
.mini-contact.active {
  background: #f2f7e9;
  border-left: 2px solid #84b647;
  padding-left: 13px;
}
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: #e5eddc;
  font-size: 11px;
  font-weight: 600;
  color: #5d7547;
}
.mini-contact .avatar {
  width: 28px;
  height: 28px;
  font-size: 9px;
}
.av-ES {
  background: #e2d9f0;
  color: #79618e;
}
.av-JL {
  background: #eadccb;
  color: #957851;
}
.av-MP {
  background: #d5e4ec;
  color: #608390;
}
.mini-contact strong {
  font-size: 10px;
  font-weight: 650;
  display: block;
  line-height: 1.4;
}
.mini-contact small {
  font-size: 8px;
  display: block;
  color: #8b958d;
  margin-top: 3px;
}
.mini-contact time {
  font-size: 7px;
  color: #9aa28f;
  position: absolute;
  right: 15px;
  top: 14px;
}
.mini-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #98a08f;
  margin: 16px 16px 7px;
}
.workspace-mini {
  font-size: 8px;
  color: #7e8b7c;
  padding: 5px 18px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.workspace-mini .icon {
  width: 10px;
  height: 10px;
  margin-left: auto;
}
.workspace-mini i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #b8cf9a;
}
.workspace-mini i.purple {
  background: #cec0df;
}
.mini-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid #ecf0e9;
}
.chat-head b {
  font-size: 10px;
}
.chat-head small {
  display: block;
  color: #8c988c;
  font-size: 8px;
  line-height: 1.3;
}
.chat-head .avatar {
  width: 27px;
  height: 27px;
  font-size: 9px;
}
.chat-status {
  margin-left: auto;
  font-size: 8px;
  color: #68913e;
  border: 1px solid #dbe7d1;
  border-radius: 4px;
  padding: 1px 7px;
}
.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 22px;
  background: radial-gradient(#93a78d12 0.7px, transparent 0.7px) 0 0/12px 12px
    #fcfdfb;
  gap: 9px;
}
.chat-day {
  align-self: center;
  font-size: 7px;
  color: #a0a69a;
  padding: 0 0 3px;
}
.bubble {
  font-size: 9px;
  line-height: 1.6;
  padding: 8px 11px;
  border-radius: 7px;
  max-width: 80%;
}
.bubble small {
  display: block;
  text-align: right;
  font-size: 6px;
  color: #95a284;
  line-height: 1;
}
.bubble.incoming {
  border: 1px solid #e7ece2;
  align-self: flex-start;
  background: white;
}
.bubble.outgoing {
  background: #e8f2d9;
  align-self: flex-end;
  max-width: 77%;
}
.mini-product {
  align-self: flex-end;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px;
  background: #fff;
  border: 1px solid #e7eddf;
  border-radius: 7px;
  width: 230px;
  margin-top: -3px;
}
.product-swatch {
  width: 48px;
  height: 43px;
  background: linear-gradient(30deg, #d5cbb7 1%, #efebe1 50%, #d2cbbd);
  border-radius: 4px;
  position: relative;
}
.product-swatch:after {
  content: "";
  border: 1px solid #c2b79f;
  border-radius: 2px;
  position: absolute;
  inset: 7px 10px;
  transform: rotate(-10deg);
}
.mini-product b {
  font-size: 9px;
  display: block;
}
.mini-product small {
  font-size: 7px;
  display: block;
  color: #9aa190;
}
.mini-product span:not(.product-swatch) {
  font-size: 7px;
  color: #668846;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 5px;
}
.mini-product .icon {
  width: 10px;
  height: 10px;
}
.assignment {
  align-self: center;
  font-size: 7px;
  color: #8b9a87;
}
.assignment .icon {
  width: 9px;
  height: 9px;
}
.reply-box {
  margin: 10px 15px;
  padding: 8px 10px;
  border: 1px solid #e8ece4;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #a1aa9c;
}
.reply-box span {
  display: flex;
  gap: 10px;
}
.reply-box .icon {
  width: 13px;
  height: 13px;
}
.float-pill {
  position: absolute;
  background: #fff;
  border: 1px solid #e2eacf;
  box-shadow: 0 14px 35px #2338190c;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  font-size: 11px;
  z-index: 2;
}
.pill-one {
  left: 8px;
  bottom: 85px;
  transform: rotate(-3deg);
}
.float-icon {
  background: #ebf5df;
  color: #699734;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.float-icon .icon {
  width: 17px;
}
.float-pill strong {
  display: block;
  font-size: 10px;
}
.float-pill small {
  display: block;
  color: #899480;
  font-size: 9px;
}
.pill-two {
  right: 0;
  top: 66px;
  transform: rotate(3deg);
  font-size: 10px;
  gap: 9px;
}
.pill-two > .icon {
  color: #85b345;
  width: 16px;
}
.pill-two .tiny-dot {
  width: 5px;
  height: 5px;
  margin-left: 6px;
}
.preview-label {
  font-size: 8px;
  letter-spacing: 0.03em;
  color: #a2ad9b;
  text-align: center;
  margin-top: 15px;
}
.scene-orbit {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid #b9d58f55;
  border-radius: 50%;
  z-index: -1;
}
.orbit-a {
  right: -40px;
  top: -40px;
}
.orbit-b {
  left: -25px;
  bottom: 0;
  width: 115px;
  height: 115px;
}
.use-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0 40px;
  border-bottom: 1px solid var(--line);
  gap: 25px;
}
.use-strip > span {
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: #889384;
}
.use-strip > div {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 550;
  color: #677b6a;
}
.use-strip .icon {
  width: 19px;
  color: #7f9574;
}
.section {
  padding-top: 100px;
  padding-bottom: 100px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 35px;
  margin-bottom: 40px;
}
.section-head .eyebrow {
  margin-bottom: 17px;
}
.section-head > p {
  max-width: 345px;
  font-size: 14px;
  line-height: 1.8;
}
.section-head.centered {
  display: block;
}
.section-head.centered > p {
  margin: 20px auto 0;
  max-width: 550px;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
}
.feature-card {
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(140deg, #fafcf7, #fff);
  overflow: hidden;
}
.feature-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #eaf3db;
  color: #709d41;
  border-radius: 10px;
  margin-bottom: 25px;
}
.feature-card h3 {
  font-size: 21px;
  letter-spacing: -0.035em;
  max-width: 255px;
  line-height: 1.3;
}
.feature-card > p {
  font-size: 13px;
  margin: 13px 0 26px;
  line-height: 1.8;
}
.purple-bg {
  background: #eeebf7;
  color: #9281ac;
}
.blue-bg {
  background: #e9f0f6;
  color: #7d9eb1;
}
.feature-chat {
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5eade;
  padding: 16px 12px;
}
.feature-message {
  display: flex;
  align-items: center;
  gap: 9px;
}
.feature-message .avatar {
  font-size: 8px;
  width: 27px;
  height: 27px;
}
.feature-message b {
  font-size: 9px;
}
.feature-message p {
  font-size: 8px;
  line-height: 1.5;
}
.internal-note {
  margin-top: 13px;
  font-size: 8px;
  padding: 7px;
  background: #fff8e5;
  border-radius: 4px;
  color: #9d8e53;
  white-space: nowrap;
}
.internal-note .icon {
  width: 10px;
  height: 10px;
}
.chip-row {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.chip-row span {
  font-size: 6px;
  background: #f3f6ef;
  padding: 3px 5px;
  border-radius: 4px;
  color: #899979;
}
.brand-stack > div {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px;
  background: #fff;
  border: 1px solid #e3e9e0;
  border-radius: 9px;
  box-shadow: 0 7px 12px #20361505;
  margin-bottom: 9px;
}
.brand-square {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e6eddb;
  color: #708a51;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.brand-square.lilac {
  background: #eee8f3;
  color: #9c85b3;
}
.brand-stack b {
  font-size: 10px;
}
.brand-stack small {
  display: block;
  font-size: 7px;
  color: #a4ab9f;
}
.brand-stack .icon {
  width: 12px;
  height: 12px;
  color: #b4c0ac;
  margin-left: auto;
}
.flow-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
}
.flow-mini span {
  border: 1px solid #e0e7db;
  background: #fff;
  width: 180px;
  padding: 7px 13px;
  border-radius: 7px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 3px 5px #20361504;
}
.flow-mini i {
  color: #adb9a4;
  font-style: normal;
  height: 16px;
  line-height: 16px;
}
.flow-mini .icon {
  width: 14px;
  height: 14px;
  color: #7f9e68;
}
.connection-section {
  background: #f5f8f0;
  border-top: 1px solid #eaf0e3;
  border-bottom: 1px solid #eaf0e3;
  padding: 76px 0;
}
.connection-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr;
  gap: 65px;
  align-items: center;
}
.connection-layout h2 {
  margin: 17px 0 20px;
  font-size: 36px;
}
.connection-layout > div > p {
  font-size: 14px;
  max-width: 330px;
  line-height: 1.8;
  margin-bottom: 20px;
}
.connection-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.connection-cards article {
  background: #fff;
  border: 1px solid #e1e9d8;
  border-radius: 13px;
  padding: 25px;
}
.connection-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
}
.meta-mark {
  font-size: 35px;
  color: #377fbc;
  line-height: 1;
  font-weight: 700;
}
.tag {
  border-radius: 5px;
  background: #eef5e5;
  color: #709443;
  font-size: 8px;
  letter-spacing: 0.08em;
  font-weight: 700;
  line-height: 1.7;
  padding: 4px 8px;
  white-space: nowrap;
}
.tag.neutral {
  background: #f0f3ed;
  color: #89977b;
}
.evolution-mark {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #edf4e5;
  border-radius: 8px;
  color: #84a15d;
}
.connection-cards h3 {
  font-size: 20px;
  line-height: 1.25;
}
.connection-cards article > p {
  font-size: 12px;
  line-height: 1.8;
  margin: 13px 0 19px;
}
.connection-cards ul {
  font-size: 10px;
  line-height: 1.6;
  margin: 0;
}
.connection-cards li {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  align-items: flex-start;
}
.connection-cards li .icon {
  width: 12px;
  height: 15px;
  color: #8cab5c;
}
.connection-cards p.fine {
  font-size: 9px;
  margin: 15px 0 0;
  color: #98a18d;
}
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 23px;
}
.solution {
  border-radius: 14px;
  padding: 38px;
  background: #f3f7ed;
  border: 1px solid #e2eadd;
}
.solution.hospitality {
  background: #f3f2f8;
  border-color: #e6e3f0;
}
.solution-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #7d9369;
}
.hospitality .solution-label {
  color: #9285a7;
}
.solution h3 {
  font-size: 28px;
  margin-top: 17px;
  line-height: 1.25;
}
.solution > p {
  font-size: 13px;
  margin: 18px 0 28px;
  max-width: 395px;
  line-height: 1.8;
}
.solution-demo {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #ffffffda;
  padding: 17px;
  border: 1px solid #e1e7d9;
  border-radius: 10px;
  box-shadow: 0 5px 15px #223d2204;
}
.solution-demo b {
  font-size: 11px;
}
.solution-demo p {
  font-size: 9px;
  line-height: 1.6;
  max-width: 280px;
}
.solution-demo > .icon {
  margin-left: auto;
  width: 15px;
  color: #86a467;
}
.solution-demo .avatar .icon {
  width: 17px;
}
.hospitality .avatar {
  background: #eae5f1;
  color: #9787b0;
}
.pill-list {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.pill-list span {
  font-size: 9px;
  line-height: 1.5;
  border: 1px solid #dce4d2;
  border-radius: 30px;
  padding: 5px 10px;
  color: #7a8c6c;
}
.hospitality .pill-list span {
  border-color: #e1dceb;
  color: #93849f;
}
.solutions-grid + .fine {
  margin-top: 22px;
}
.pricing-section {
  background: #f9faf7;
  padding: 90px 0 60px;
  border-block: 1px solid #edf0e7;
}
.pricing-section.standalone {
  padding-top: 65px;
  border-top: 0;
}
.pricing-section .section-head {
  margin-bottom: 27px;
}
.pricing-section h1 {
  font-size: 52px;
}
.pricing-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 27px 0 38px;
}
.segmented {
  display: flex;
  padding: 5px;
  background: #e9eee2;
  border: 1px solid #dfe7d6;
  border-radius: 9px;
  gap: 3px;
}
.segmented button {
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 6px;
  color: #7c8972;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 550;
}
.segmented button.active {
  color: var(--navy);
  background: #fff;
  box-shadow: 0 1px 5px #2840100c;
}
.segmented button span {
  font-size: 8px;
  color: #6c923d;
  background: #dcebc4;
  border-radius: 4px;
  padding: 1px 5px;
}
.pricing-controls > .currency {
  background: #fff;
  border: 1px solid #e3e8de;
  border-radius: 8px;
  padding: 10px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-top: 12px;
  align-items: stretch;
}
.price-card {
  border: 1px solid #dfe5d7;
  background: white;
  border-radius: 13px;
  padding: 31px 30px 29px;
  position: relative;
}
.price-card.featured {
  background: #f1f8e8;
  border: 1.5px solid #9dbe76;
  box-shadow: 0 10px 25px #304d1809;
}
.popular {
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  top: -24px;
  height: 25px;
  border-radius: 10px 10px 0 0;
  background: #bddb9a;
  border: 1px solid #9dbe76;
  border-bottom: 0;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: #43602b;
  padding: 5px;
}
.price-card.featured {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.plan-icon {
  border: 1px solid #e1e8d8;
  background: #f6f9f0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  margin-bottom: 15px;
  color: #84a759;
}
.plan-icon .icon {
  width: 17px;
  height: 17px;
}
.featured .plan-icon {
  background: #e0efc9;
  border-color: #c9dea9;
  color: #608833;
}
.price-card h3 {
  font-size: 24px;
}
.plan-summary {
  font-size: 12px;
  margin: 9px 0 25px;
}
.price {
  font-size: 37px;
  letter-spacing: -0.045em;
  font-family: var(--heading);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  white-space: nowrap;
}
.price > span {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0;
  color: #87907f;
  font-weight: 400;
  margin-left: 4px;
}
.billing-caption {
  font-size: 10px;
  color: #93a086;
  margin: 5px 0 23px;
  min-height: 17px;
}
.plan-divider {
  height: 1px;
  background: #e4e9dc;
  margin: 24px 0;
}
.included-label {
  font-size: 11px;
  font-weight: 650;
}
.check-list {
  margin: 17px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.check-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: #6e7f66;
  line-height: 1.6;
}
.check-list .icon {
  width: 13px;
  height: 17px;
  color: #92ad69;
}
.pricing-note {
  font-size: 11px;
  max-width: 870px;
  margin: 27px auto 7px;
  text-align: center;
}
.fx-note {
  font-size: 10px;
  max-width: 830px;
  margin: auto;
  text-align: center;
  color: #879580;
}
.pricing-more {
  margin-top: 24px;
}
.comparison {
  margin-top: 80px;
}
.comparison h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 35px;
}
.table-scroll {
  overflow: auto;
  width: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  text-align: left;
}
th,
td {
  padding: 16px 20px;
  border-bottom: 1px solid #e6ebe0;
}
thead th {
  background: #eef4e7;
  font-size: 13px;
  font-weight: 650;
  color: var(--navy);
}
thead th:not(:first-child) {
  text-align: center;
}
tbody th {
  font-weight: 500;
  color: #6b7b60;
}
tbody td {
  text-align: center;
  color: #6e7f66;
}
.table-check {
  display: inline-flex;
  border-radius: 50%;
  background: #e9f2dd;
  padding: 4px;
  color: #749647;
}
.table-check .icon {
  width: 12px;
  height: 12px;
}
.comparison > .fine {
  margin: 20px auto 0;
  max-width: 860px;
  text-align: center;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.steps-grid article > span {
  font-family: var(--heading);
  font-size: 14px;
  display: inline-grid;
  place-items: center;
  color: #789351;
  width: 39px;
  height: 39px;
  border: 1px solid #d6e2c7;
  border-radius: 50%;
  margin-bottom: 24px;
  background: #f7faf3;
}
.steps-grid h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.steps-grid p {
  font-size: 13px;
  line-height: 1.8;
  max-width: 280px;
}
.cta {
  padding: 54px 60px;
  background: #edf4e3;
  border: 1px solid #e0e9d3;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  overflow: hidden;
  margin-bottom: 90px;
}
.cta:after {
  content: "";
  position: absolute;
  border: 1px solid #cddebb;
  right: 270px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  pointer-events: none;
}
.cta h2 {
  font-size: 38px;
  margin: 17px 0;
}
.cta p {
  font-size: 13px;
}
.cta .button {
  position: relative;
  z-index: 1;
}
.footer {
  max-width: 1220px;
  width: calc(100% - 96px);
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 70px;
  padding-bottom: 58px;
}
.footer-top p {
  font-size: 12px;
  margin: 21px 0 20px;
  line-height: 1.8;
}
.footer-top > div > a:not(.brand) {
  display: block;
  font-size: 11px;
  color: #7a8970;
  margin: 12px 0;
}
.footer-top > div:first-child > a:last-child {
  color: #5f793f;
}
.footer-top a .icon {
  width: 12px;
  margin-left: 10px;
}
.footer-top > div > span {
  display: block;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  color: #98a189;
  margin-bottom: 23px;
  margin-top: 7px;
}
.footer-bottom {
  border-top: 1px solid #e7ebdf;
  padding: 22px 0 25px;
  display: flex;
  justify-content: space-between;
  color: #a2aa98;
  font-size: 9px;
}
.faq {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
}
.faq h2 {
  margin: 18px 0;
}
.faq > div > p {
  font-size: 13px;
  line-height: 1.9;
}
.faq a {
  color: #648b3c;
  font-weight: 550;
}
.faq details {
  border-bottom: 1px solid #e4e9dd;
  padding: 19px 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-weight: 550;
  font-size: 14px;
  line-height: 1.5;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary span {
  font-size: 21px;
  font-weight: 400;
  color: #92a181;
  transition: transform 0.2s;
}
.faq details[open] summary span {
  transform: rotate(45deg);
}
.faq details p {
  font-size: 12px;
  line-height: 1.9;
  margin-top: 15px;
  max-width: 560px;
}
.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-art {
  padding: 45px 60px;
  background: radial-gradient(ellipse at 80% 40%, #e7f2d5, transparent 80%)
    #f4f7ed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #e1e8d7;
  position: relative;
  overflow: hidden;
}
.auth-art > div {
  margin: 70px 0;
  max-width: 450px;
  z-index: 1;
}
.auth-art h2 {
  font-size: 45px;
  line-height: 1.18;
  margin: 20px 0 25px;
}
.auth-art p {
  font-size: 14px;
  line-height: 1.8;
}
.auth-art > span {
  font-size: 10px;
  color: #8a987b;
}
.auth-art:after {
  content: "";
  width: 500px;
  height: 500px;
  position: absolute;
  border: 1px solid #d7e5c6;
  left: -250px;
  bottom: -200px;
  border-radius: 50%;
}
.auth-conversation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 60px;
}
.auth-conversation > div {
  background: white;
  border: 1px solid #e1e8d5;
  padding: 17px;
  border-radius: 10px 10px 10px 0;
  font-size: 12px;
  box-shadow: 0 8px 20px #2f501008;
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
}
.auth-conversation > div:last-child {
  align-self: flex-end;
  background: #dcecc4;
  color: #617944;
  border-radius: 10px 10px 0 10px;
}
.auth-conversation span {
  color: #81a457;
  font-size: 11px;
}
.auth-main {
  display: flex;
  flex-direction: column;
  padding: 45px 70px;
}
.back-link {
  font-size: 12px;
  color: #7d8c74;
}
.auth-form-wrap {
  max-width: 400px;
  width: 100%;
  margin: auto;
  padding: 60px 0;
}
.auth-form-wrap h1 {
  font-size: 34px;
  line-height: 1.25;
}
.auth-form-wrap > p:first-of-type {
  font-size: 13px;
  margin: 16px 0 30px;
  line-height: 1.8;
}
.button.google {
  border: 1px solid #dce5d3;
  background: white;
  gap: 12px;
  font-weight: 500;
}
.google-g {
  font-weight: 700;
  font-family: Arial;
  font-size: 18px;
  color: #4285f4;
}
.or-line {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #a6af9b;
  margin: 25px 0;
  font-size: 10px;
}
.or-line:before,
.or-line:after {
  content: "";
  height: 1px;
  background: #e7ecdf;
  flex: 1;
}
.stack-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: #5b7054;
}
label > a {
  float: right;
  font-size: 11px;
  color: #789754;
}
input:not([type="checkbox"]):not([type="radio"]),
select {
  width: 100%;
  border: 1px solid #dfe6d7;
  border-radius: 7px;
  padding: 12px 13px;
  background: #fff;
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 13px;
  min-height: 45px;
}
input::placeholder {
  color: #a1ad95;
}
input:focus,
select:focus {
  border-color: #93b463;
}
.currency select {
  display: inline-block;
  width: auto;
  min-height: unset;
  margin: 0;
}
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 11px;
  line-height: 1.8;
  font-weight: 400;
}
.checkbox input {
  accent-color: var(--navy);
  margin: 4px 0 0;
  flex-shrink: 0;
}
.checkbox a {
  color: #608a38;
  text-decoration: underline;
}
.form-error {
  font-size: 12px;
  color: #a13e34;
  line-height: 1.6;
}
.form-error:empty {
  display: none;
}
.auth-switch {
  text-align: center;
  font-size: 12px;
  margin: 24px 0;
}
.auth-switch a {
  color: #5b8337;
  font-weight: 650;
}
.auth-foot {
  font-size: 10px;
  text-align: center;
  color: #9bab8b;
  margin-top: 24px;
}
.auth-foot .icon {
  width: 12px;
  height: 12px;
}
.success-message {
  background: #edf6e2;
  border: 1px solid #d6e6c3;
  padding: 20px;
  border-radius: 8px;
  font-size: 13px;
  color: #6b8d44;
}
.portal-layout {
  display: flex;
  min-height: 100vh;
  background: #f7f9f4;
}
.portal-sidebar {
  width: 245px;
  position: fixed;
  inset: 0 auto 0 0;
  background: #fff;
  border-right: 1px solid #e2e8db;
  padding: 33px 22px 20px;
  display: flex;
  flex-direction: column;
}
.portal-sidebar .brand {
  margin-bottom: 50px;
}
.portal-sidebar .brand img {
  width: 143px;
}
.sidebar-label {
  font-size: 8px;
  letter-spacing: 0.15em;
  color: #a3ad95;
  margin: 0 12px 12px;
}
.portal-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-sidebar nav a,
.sidebar-bottom a,
.sidebar-bottom button {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 13px;
  border-radius: 7px;
  font-size: 12px;
  color: #80906f;
  text-align: left;
}
.portal-sidebar nav .icon,
.sidebar-bottom .icon {
  width: 17px;
  height: 17px;
}
.portal-sidebar nav a.active {
  background: #ecf4df;
  color: #678541;
  font-weight: 600;
}
.portal-sidebar nav a:hover {
  background: #f3f7ec;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 50px;
}
.user-card {
  margin-top: 18px;
  padding: 20px 3px 0;
  border-top: 1px solid #e8ecdf;
  display: flex;
  gap: 10px;
  align-items: center;
}
.user-card b {
  font-size: 11px;
  display: block;
  max-width: 142px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card small {
  font-size: 9px;
  display: block;
  color: #a1ac91;
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-main {
  margin-left: 245px;
  flex: 1;
  min-width: 0;
}
.portal-top {
  height: 79px;
  border-bottom: 1px solid #e6eadd;
  background: #ffffff99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 44px;
}
.portal-top > span {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #8c9a7d;
}
.portal-top > a {
  font-size: 11px;
  color: #83986c;
}
.mobile-brand,
.portal-mobile-nav {
  display: none;
}
.portal-content {
  padding: 37px 44px 80px;
  max-width: 1380px;
  margin: 0 auto;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 27px;
}
.page-heading .eyebrow {
  font-size: 8px;
}
.page-heading h1 {
  font-size: 32px;
  margin: 9px 0 10px;
}
.page-heading p {
  font-size: 12px;
}
.page-heading > .tag {
  font-size: 8px;
}
.notice {
  background: #fff8e5;
  border: 1px solid #eee4c4;
  padding: 16px 20px;
  border-radius: 9px;
  font-size: 12px;
  color: #958459;
  margin-bottom: 24px;
}
.notice button {
  font-weight: 600;
  text-decoration: underline;
  padding: 0 5px;
  color: #87713e;
}
.notice.subtle {
  background: #edf3e5;
  border-color: #dde7cf;
  color: #7e9168;
  font-size: 11px;
}
.dashboard-welcome {
  background: #eaf2de;
  border: 1px solid #dbe7ca;
  border-radius: 13px;
  padding: 31px 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dashboard-welcome h2 {
  font-size: 30px;
  margin: 13px 0;
}
.dashboard-welcome p {
  max-width: 460px;
  font-size: 13px;
  margin-bottom: 20px;
}
.dashboard-welcome .eyebrow {
  font-size: 8px;
}
.welcome-art {
  width: 130px;
  height: 130px;
  position: relative;
  flex-shrink: 0;
  border: 1px solid #ccddb5;
  border-radius: 50%;
  margin: 0 35px;
}
.welcome-art > .icon {
  width: 62px;
  height: 62px;
  padding: 17px;
  background: #fff;
  border: 1px solid #d9e7c7;
  border-radius: 15px;
  position: absolute;
  left: -5px;
  top: 30px;
  transform: rotate(-10deg);
  color: #79984f;
  box-shadow: 0 10px 20px #57722207;
}
.welcome-art > .icon:nth-child(2) {
  left: 62px;
  top: 48px;
  transform: rotate(12deg);
  background: #d7eab9;
}
.welcome-art > .tiny-dot {
  position: absolute;
  right: 20px;
  top: 12px;
  width: 10px;
  height: 10px;
  background: #c4dca6;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 23px 0;
}
.stat-grid article {
  background: #fff;
  border: 1px solid #e1e8d8;
  border-radius: 10px;
  padding: 23px;
}
.stat-grid span {
  font-size: 11px;
  color: #8a987e;
  display: block;
}
.stat-grid strong {
  display: block;
  font-size: 23px;
  font-family: var(--heading);
  margin: 8px 0;
  letter-spacing: -0.035em;
}
.stat-grid em {
  font-style: normal;
  font-weight: 400;
  color: #a5b195;
  font-size: 19px;
}
.stat-grid small {
  font-size: 10px;
  color: #9ba88d;
}
.panel {
  background: #fff;
  border: 1px solid #dfe6d6;
  border-radius: 11px;
  padding: 27px;
  margin-bottom: 23px;
}
.panel h2 {
  font-size: 20px;
  letter-spacing: -0.025em;
}
.panel h3 {
  font-size: 18px;
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.panel-heading p {
  font-size: 11px;
  margin-top: 7px;
}
.empty-state {
  padding: 44px 20px 35px;
  text-align: center;
}
.empty-icon {
  width: 53px;
  height: 53px;
  background: #f1f6e8;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: #a0b581;
}
.empty-state h3 {
  font-size: 17px;
}
.empty-state p {
  font-size: 11px;
  max-width: 370px;
  margin: 11px auto 0;
  line-height: 1.8;
}
.empty-state.compact {
  padding: 37px 15px;
}
.empty-state.compact > .icon {
  color: #a5b593;
  margin-bottom: 17px;
}
.onboarding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 23px;
}
.checklist-row {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 11px;
  padding: 14px 0;
  border-bottom: 1px solid #eef1e7;
  color: #7c8b6a;
}
.checklist-row:last-child {
  border: 0;
  padding-bottom: 0;
}
.checklist-row > a,
.checklist-row > span:last-child {
  margin-left: auto;
}
.checklist-row > a {
  font-size: 10px;
  color: #9daf86;
}
.step-circle {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #e0e7d6;
  background: #f9fbf6;
  font-size: 9px;
  color: #9aac85;
}
.step-circle.done {
  background: #eaf4dd;
  border-color: #dfeccb;
  color: #7b9c4e;
}
.step-circle .icon {
  width: 12px;
  height: 12px;
}
.muted-copy {
  font-size: 12px;
  color: #9ba88d;
  margin-top: 23px;
  line-height: 1.8;
}
.notification {
  display: flex;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid #eaf0e0;
}
.notification > span {
  color: #9bb57b;
}
.notification b {
  font-size: 11px;
}
.notification p {
  font-size: 10px;
}
.notification small {
  font-size: 9px;
  color: #a4ae97;
}
.workspace-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.workspace-cards article {
  border: 1px solid #e5ebdb;
  border-radius: 9px;
  padding: 20px;
  background: #fbfcf8;
}
.workspace-cards h3 {
  font-size: 17px;
  margin: 12px 0 7px;
}
.workspace-cards p {
  font-size: 11px;
  margin-bottom: 12px;
}
.workspace-cards .button {
  margin-top: 17px;
}
.workspace-cards article > a {
  display: block;
  font-size: 11px;
  color: #84a161;
  margin-top: 20px;
}
.status {
  display: inline-flex;
  border-radius: 4px;
  padding: 3px 7px;
  background: #f4eddd;
  color: #aa955d;
  font-size: 9px;
}
.status.success {
  background: #eaf3dd;
  color: #7e9c4b;
}
.subscription-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.subscription-panel h2 {
  font-size: 30px;
  margin: 13px 0;
}
.subscription-panel p {
  font-size: 12px;
}
.subscription-panel .eyebrow {
  font-size: 9px;
}
.subscription-panel > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.text-button {
  font-size: 11px;
  color: #8b977d;
  text-decoration: underline;
}
.settings-form {
  max-width: 870px;
}
.settings-form > p {
  font-size: 12px;
  margin: 10px 0 22px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
}
.form-grid .span-two {
  grid-column: span 2;
}
.optional {
  color: #a4af96;
  font-weight: 400;
}
.settings-form hr {
  border: 0;
  border-top: 1px solid #e6ecdd;
  margin: 31px 0;
}
.settings-form .button {
  margin-top: 27px;
}
.settings-form .form-error {
  margin-top: 20px;
}
.settings-form p.fine {
  font-size: 10px;
  margin: 18px 0 0;
}
.checkout-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}
.checkout-grid h2 {
  font-size: 30px;
  margin: 13px 0;
}
.checkout-grid > form > p {
  font-size: 12px;
  margin: 12px 0 24px;
}
.checkout-grid > form > label {
  margin-top: 24px;
}
.renewal-options {
  border: none;
  padding: 0;
  margin: 26px 0;
}
.renewal-options legend {
  font-size: 12px;
  font-weight: 550;
  color: #5b7054;
  margin-bottom: 12px;
}
.renewal-options > label {
  border: 1px solid #dfe7d6;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
}
.renewal-options > label:has(input:checked) {
  background: #f4f9ed;
  border-color: #98b972;
}
.renewal-options input {
  accent-color: var(--navy);
  margin-top: 4px;
}
.renewal-options b {
  font-size: 12px;
  font-weight: 600;
}
.renewal-options small {
  font-size: 10px;
  line-height: 1.8;
  display: block;
  margin-top: 3px;
  color: #8b9978;
}
.checkout-billing {
  background: #f8faf4;
  padding: 20px;
  border-radius: 7px;
  margin-bottom: 23px;
  font-size: 12px;
}
.checkout-billing p {
  font-size: 11px;
  margin: 7px 0 10px;
}
.checkout-billing a {
  display: inline-flex;
  font-size: 11px;
  gap: 8px;
  align-items: center;
  color: #7f9b58;
}
.checkout-billing a .icon {
  width: 13px;
}
.order-summary {
  background: #f3f8eb;
  border-color: #d6e4c3;
}
.summary-price {
  font-size: 35px;
  letter-spacing: -0.05em;
  font-family: var(--heading);
  font-weight: 650;
  margin: 22px 0 5px;
}
.order-summary p {
  font-size: 11px;
}
.order-summary > .check-list {
  margin-top: 27px;
}
.order-summary .fine {
  font-size: 10px;
  margin-top: 12px;
}
.order-summary .fine .icon {
  width: 12px;
  height: 12px;
}
.quote-confirm {
  border-color: #a6c77e;
  background: #f6faef;
}
.quote-confirm h3 {
  font-size: 30px;
  margin: 12px 0;
}
.quote-confirm p {
  font-size: 12px;
  margin: 14px 0;
}
.quote-confirm .button {
  margin-top: 20px;
}
.checkout-grid .form-error {
  margin-bottom: 20px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #1230445c;
  backdrop-filter: blur(4px);
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal {
  background: #fff;
  border: 1px solid #e5ebdc;
  box-shadow: 0 20px 80px #06211730;
  border-radius: 15px;
  padding: 38px;
  max-width: 510px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow: auto;
}
.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
}
.modal h2 {
  font-size: 28px;
  margin: 17px 0;
}
.modal > p {
  font-size: 13px;
  margin: 15px 0 24px;
}
.modal .stack-form {
  margin-top: 26px;
}
.modal .eyebrow {
  font-size: 8px;
}
.modal-actions {
  display: flex;
  gap: 13px;
  margin-top: 25px;
}
.contact-page {
  padding-top: 85px;
  padding-bottom: 110px;
}
.contact-page h1 {
  font-size: 60px;
  margin: 25px 0;
}
.contact-page > p {
  font-size: 17px;
  max-width: 540px;
  line-height: 1.8;
}
.contact-email {
  display: inline-flex;
  gap: 35px;
  font-size: 25px;
  color: #6d9743;
  border-bottom: 1px solid #b1c891;
  padding-bottom: 12px;
  margin: 35px 0 60px;
  align-items: center;
}
.contact-email .icon {
  width: 27px;
  height: 27px;
}
.contact-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}
.contact-boxes > div {
  padding: 30px;
  border: 1px solid #e4ebdb;
  border-radius: 12px;
  background: #f9fcf5;
}
.contact-boxes > .icon {
  color: #a0b780;
}
.contact-boxes h3 {
  font-size: 22px;
  margin: 20px 0 14px;
}
.contact-boxes p {
  font-size: 13px;
}
.legal-page {
  max-width: 860px;
  padding: 65px 0 95px;
}
.legal-page h1 {
  font-size: 48px;
  margin: 22px 0;
}
.legal-meta {
  font-size: 12px;
  margin-bottom: 25px;
}
.legal-page article {
  max-width: 760px;
}
.legal-page article p {
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 22px;
}
.legal-page article h2 {
  font-size: 25px;
  margin: 36px 0 17px;
}
.not-found {
  padding: 100px 0 140px;
}
.not-found h1 {
  font-size: 48px;
  margin: 20px 0;
}
.not-found p {
  margin-bottom: 30px;
}
.not-found .button {
  margin-top: 15px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: #173d51;
  color: #fff;
  padding: 16px 25px;
  border-radius: 10px;
  box-shadow: 0 10px 25px #12385522;
  max-width: 600px;
  width: max-content;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  z-index: 80;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 1550px) {
  .hero h1 {
    font-size: 76px;
  }
  .hero-copy {
    max-width: 900px;
  }
}
@media (max-width: 1150px) {
  .site-header {
    padding: 0 32px;
    gap: 20px;
  }
  .desktop-nav {
    gap: 20px;
  }
  .nav-actions {
    gap: 16px;
  }
  .wrap,
  .footer {
    width: calc(100% - 64px);
  }
  .connection-layout {
    gap: 30px;
    grid-template-columns: 0.8fr 1.4fr;
  }
  .connection-cards article {
    padding: 20px;
  }
  .connection-cards .tag {
    font-size: 6px;
  }
  .feature-card {
    padding: 25px 20px;
  }
  .feature-grid {
    gap: 15px;
  }
  .product-scene {
    padding-inline: 35px;
  }
  .pill-one {
    left: -10px;
  }
  .pill-two {
    right: -10px;
  }
  .inbox-ui {
    grid-template-columns: 48px 255px 1fr;
  }
  .price-card {
    padding: 27px 23px;
  }
  .price {
    font-size: 33px;
  }
  .hero {
    padding-top: 28px;
  }
  .auth-art {
    padding: 35px 40px;
  }
  .auth-main {
    padding: 35px 40px;
  }
  .portal-content {
    padding: 30px;
  }
  .portal-top {
    padding: 0 30px;
  }
  .portal-sidebar {
    width: 220px;
    padding: 29px 16px 18px;
  }
  .portal-main {
    margin-left: 220px;
  }
  .welcome-art {
    margin-right: 0;
  }
  .dashboard-welcome {
    padding: 25px;
  }
  .footer-top {
    gap: 35px;
  }
  .check-list li {
    font-size: 10px;
  }
}
@media (max-width: 920px) {
  .desktop-nav {
    gap: 18px;
  }
  .nav-actions > .currency {
    display: none;
  }
  .site-header .brand img {
    width: 137px;
  }
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
  .feature-card.large {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
  }
  .feature-card.large .feature-icon {
    grid-column: 1;
  }
  .feature-card.large .feature-chat {
    grid-column: 2;
    grid-row: 1/4;
    align-self: center;
  }
  .feature-card.large h3 {
    grid-column: 1;
    max-width: unset;
  }
  .feature-card.large > p {
    grid-column: 1;
  }
  .connection-layout {
    grid-template-columns: 1fr;
  }
  .connection-layout > div:first-child {
    max-width: 550px;
  }
  .connection-layout > div > p {
    max-width: 500px;
  }
  .connection-cards article {
    padding: 30px;
  }
  .connection-cards .tag {
    font-size: 8px;
  }
  .connection-layout h2 {
    font-size: 36px;
  }
  .pricing-grid {
    gap: 13px;
  }
  .price-card {
    padding: 25px 19px;
  }
  .price {
    font-size: 30px;
  }
  .plan-summary {
    min-height: 40px;
  }
  .price > span {
    font-size: 9px;
  }
  .price-card .button {
    font-size: 12px;
    padding: 13px 10px;
    gap: 10px;
  }
  .solution {
    padding: 27px;
  }
  .solution h3 {
    font-size: 26px;
  }
  .hero-side-note {
    display: none;
  }
  .hero-copy {
    max-width: 650px;
  }
  .hero h1 {
    font-size: 60px;
  }
  .use-strip {
    gap: 14px;
  }
  .use-strip > span {
    max-width: 110px;
    font-size: 8px;
  }
  .use-strip > div {
    font-size: 12px;
  }
  .product-scene {
    padding-inline: 15px;
  }
  .float-pill {
    padding: 12px 15px;
  }
  .pill-one {
    bottom: 62px;
    left: -12px;
  }
  .pill-two {
    top: 48px;
    right: -12px;
    font-size: 8px;
  }
  .inbox-ui {
    grid-template-columns: 46px 220px 1fr;
  }
  .chat-messages {
    padding: 10px 15px;
  }
  .inbox-title {
    font-size: 12px;
  }
  .mini-contact {
    gap: 7px;
  }
  .mini-contact small {
    font-size: 7px;
  }
  .mini-contact time {
    font-size: 6px;
    right: 10px;
  }
  .auth-art {
    padding: 35px;
  }
  .auth-main {
    padding: 35px;
  }
  .auth-art h2 {
    font-size: 37px;
  }
  .auth-conversation > div {
    font-size: 10px;
  }
  .portal-sidebar {
    width: 190px;
    padding: 29px 12px 18px;
  }
  .portal-main {
    margin-left: 190px;
  }
  .portal-sidebar nav a,
  .sidebar-bottom a,
  .sidebar-bottom button {
    font-size: 10px;
    gap: 9px;
    padding: 11px 9px;
  }
  .portal-sidebar .brand img {
    width: 133px;
  }
  .portal-content {
    padding: 25px;
  }
  .page-heading > .tag {
    display: none;
  }
  .welcome-art {
    display: none;
  }
  .dashboard-welcome h2 {
    font-size: 27px;
  }
  .stat-grid {
    gap: 12px;
  }
  .stat-grid article {
    padding: 17px;
  }
  .stat-grid strong {
    font-size: 19px;
  }
  .onboarding-grid {
    grid-template-columns: 1fr;
  }
  .panel {
    padding: 23px;
  }
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .subscription-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .subscription-panel > div:last-child {
    flex-direction: row;
  }
  .contact-page h1 {
    font-size: 48px;
  }
  .contact-boxes {
    gap: 20px;
  }
  .contact-boxes > div {
    padding: 25px;
  }
  .footer-top {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 27px;
  }
  .footer-top > div:last-child {
    grid-column: 2/4;
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .footer-top > div:last-child > span {
    margin: 0;
    font-size: 8px;
  }
  .footer-top > div:last-child > a {
    font-size: 9px;
  }
  .footer-top {
    padding-bottom: 30px;
  }
  .cta {
    padding: 40px;
  }
  .cta h2 {
    font-size: 32px;
  }
  .faq {
    gap: 35px;
  }
  .faq summary {
    font-size: 12px;
  }
}
@media (max-width: 700px) {
  html {
    scroll-padding-top: 30px;
  }
  .wrap,
  .footer {
    width: calc(100% - 40px);
  }
  .site-header {
    height: 77px;
    padding: 0 20px;
    gap: 15px;
  }
  .site-header .brand img {
    width: 126px;
  }
  .desktop-nav,
  .nav-login {
    display: none;
  }
  .mobile-menu {
    display: flex;
  }
  .nav-actions {
    gap: 9px;
  }
  .nav-actions > .button {
    padding: 9px 12px;
    font-size: 11px;
    gap: 8px;
  }
  .nav-actions > .button .icon {
    width: 14px;
  }
  .hero {
    padding-top: 23px;
  }
  .hero:before {
    left: -20px;
    right: -20px;
    height: 660px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 0.13em;
  }
  .hero-copy {
    padding-top: 24px;
  }
  .hero h1 {
    font-size: clamp(36px, 7.4vw, 51px);
    line-height: 1.16;
    letter-spacing: -0.05em;
  }
  .hero-copy > p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 540px;
    margin: 19px 0 25px;
  }
  .hero-actions {
    gap: 23px;
  }
  .hero-actions .button {
    font-size: 12px;
    padding: 13px 15px;
    gap: 16px;
  }
  .hero-actions .text-link {
    font-size: 11px;
  }
  .hero-checks {
    gap: 8px 15px;
    margin-top: 20px;
    font-size: 8px;
    max-width: 400px;
  }
  .hero-checks .icon {
    width: 11px;
    height: 11px;
  }
  .product-scene {
    margin-top: 35px;
    padding: 0 0 20px;
  }
  .product-window {
    border-radius: 10px;
  }
  .window-bar {
    height: 25px;
    padding: 0 9px;
    font-size: 6px;
  }
  .window-dots i {
    width: 4px;
    height: 4px;
  }
  .window-dots {
    gap: 3px;
  }
  .window-bar .icon {
    width: 8px;
    height: 8px;
  }
  .inbox-ui {
    grid-template-columns: 33px 1fr;
    height: 283px;
  }
  .inbox-list {
    display: none;
  }
  .mini-sidebar {
    gap: 17px;
    padding: 14px 0;
  }
  .mini-sidebar img {
    width: 18px;
    height: 18px;
  }
  .mini-sidebar .selected {
    width: 24px;
    height: 24px;
  }
  .mini-sidebar .selected .icon {
    width: 13px;
  }
  .mini-sidebar > .icon {
    width: 13px;
    height: 13px;
  }
  .mini-user {
    width: 18px;
    height: 18px;
    font-size: 7px;
  }
  .chat-head {
    padding: 10px 12px;
  }
  .chat-head .avatar {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }
  .chat-head b {
    font-size: 9px;
  }
  .chat-head small {
    font-size: 7px;
  }
  .chat-status {
    font-size: 7px;
  }
  .chat-messages {
    padding: 7px 14px;
    gap: 7px;
  }
  .chat-day {
    font-size: 6px;
  }
  .bubble {
    font-size: 8px;
    padding: 6px 9px;
  }
  .bubble small {
    font-size: 5px;
  }
  .mini-product {
    width: 180px;
    padding: 6px;
    gap: 8px;
  }
  .mini-product b {
    font-size: 8px;
  }
  .mini-product small {
    font-size: 6px;
  }
  .mini-product span:not(.product-swatch) {
    font-size: 6px;
    margin-top: 2px;
  }
  .product-swatch {
    height: 35px;
    width: 38px;
  }
  .assignment {
    font-size: 6px;
  }
  .reply-box {
    margin: 7px 9px;
    padding: 6px 8px;
  }
  .reply-box .icon {
    width: 11px;
    height: 11px;
  }
  .float-pill {
    padding: 8px 10px;
    border-radius: 9px;
  }
  .pill-one {
    bottom: 4px;
    left: 8px;
    gap: 7px;
    transform: rotate(-3deg);
  }
  .float-icon {
    width: 25px;
    height: 25px;
  }
  .float-pill strong {
    font-size: 7px;
  }
  .float-pill small {
    font-size: 6px;
  }
  .float-icon .icon {
    width: 12px;
  }
  .pill-two {
    right: -7px;
    top: 3px;
    font-size: 6px;
    gap: 5px;
    transform: rotate(4deg);
  }
  .pill-two > .icon {
    width: 10px;
    height: 10px;
  }
  .pill-two .tiny-dot {
    width: 4px;
    height: 4px;
  }
  .preview-label {
    font-size: 6px;
    margin-top: 14px;
    padding-right: 5px;
    text-align: right;
  }
  .scene-orbit {
    display: none;
  }
  .use-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 17px 21px;
    padding: 32px 0;
  }
  .use-strip > span {
    width: 100%;
    max-width: none;
    font-size: 7px;
    letter-spacing: 0.14em;
  }
  .use-strip > div {
    font-size: 9px;
    gap: 5px;
  }
  .use-strip .icon {
    width: 14px;
    height: 14px;
  }
  .section {
    padding: 63px 0;
  }
  .section-head {
    display: block;
    margin-bottom: 27px;
  }
  .section-head h2 {
    font-size: 31px;
  }
  .section-head > p {
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.8;
    max-width: 500px;
  }
  .section-head .eyebrow {
    margin-bottom: 14px;
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .feature-card.large {
    grid-column: auto;
    display: block;
  }
  .feature-card {
    padding: 27px;
  }
  .feature-card h3 {
    font-size: 24px;
    max-width: unset;
  }
  .feature-card > p {
    font-size: 13px;
    max-width: 500px;
  }
  .feature-chat {
    max-width: 360px;
  }
  .feature-message b {
    font-size: 11px;
  }
  .feature-message p {
    font-size: 10px;
  }
  .internal-note {
    font-size: 9px;
  }
  .chip-row span {
    font-size: 8px;
  }
  .feature-card.large .feature-icon {
    margin-bottom: 23px;
  }
  .brand-stack {
    max-width: 360px;
  }
  .brand-stack b {
    font-size: 12px;
  }
  .brand-stack small {
    font-size: 9px;
  }
  .brand-square {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .flow-mini {
    font-size: 11px;
    max-width: 360px;
  }
  .flow-mini span {
    width: 100%;
    padding: 10px 15px;
  }
  .feature-icon {
    margin-bottom: 20px;
  }
  .connection-section {
    padding: 53px 0;
  }
  .connection-layout h2 {
    font-size: 32px;
  }
  .connection-layout > div > p {
    font-size: 13px;
  }
  .connection-layout .text-link {
    font-size: 12px;
  }
  .connection-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .connection-cards article {
    padding: 27px;
  }
  .connection-cards h3 {
    font-size: 23px;
  }
  .connection-cards article > p {
    font-size: 12px;
  }
  .connection-cards ul {
    font-size: 11px;
  }
  .connection-cards p.fine {
    font-size: 10px;
  }
  .connection-card-top {
    margin-bottom: 18px;
  }
  .connection-cards .tag {
    font-size: 8px;
  }
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 19px;
  }
  .solution {
    padding: 29px;
  }
  .solution h3 {
    font-size: 27px;
  }
  .solution > p {
    font-size: 12px;
  }
  .solution-demo {
    padding: 15px 12px;
  }
  .solution-demo b {
    font-size: 10px;
  }
  .solution-demo p {
    font-size: 8px;
  }
  .pill-list {
    gap: 6px;
  }
  .pill-list span {
    font-size: 8px;
    padding: 4px 8px;
  }
  .pricing-section,
  .pricing-section.standalone {
    padding: 55px 0 45px;
  }
  .pricing-section h1 {
    font-size: 36px;
  }
  .pricing-controls {
    gap: 10px;
    flex-wrap: wrap;
    margin: 23px 0 40px;
  }
  .segmented {
    gap: 2px;
  }
  .segmented button {
    font-size: 10px;
    padding: 8px 10px;
    gap: 5px;
  }
  .segmented button span {
    font-size: 7px;
    padding: 1px 4px;
  }
  .pricing-controls > .currency {
    padding: 8px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 45px;
    max-width: 440px;
    margin: auto;
    padding-top: 0;
  }
  .price-card {
    padding: 29px;
  }
  .price-card h3 {
    font-size: 27px;
  }
  .plan-summary {
    min-height: unset;
    font-size: 12px;
    margin-bottom: 24px;
  }
  .price {
    font-size: 43px;
  }
  .price > span {
    font-size: 12px;
  }
  .billing-caption {
    font-size: 11px;
  }
  .price-card .button {
    font-size: 14px;
    padding: 14px;
  }
  .check-list li {
    font-size: 12px;
    line-height: 1.7;
  }
  .included-label {
    font-size: 12px;
  }
  .popular {
    font-size: 9px;
    top: -26px;
    height: 27px;
  }
  .pricing-note {
    font-size: 10px;
    line-height: 1.9;
    margin-top: 28px;
  }
  .fx-note {
    font-size: 9px;
    line-height: 1.9;
  }
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .steps-grid article {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 18px;
  }
  .steps-grid article > span {
    grid-row: span 2;
    margin: 0;
  }
  .steps-grid h3 {
    font-size: 21px;
  }
  .steps-grid p {
    max-width: unset;
    font-size: 12px;
  }
  .comparison {
    margin-top: 55px;
  }
  .comparison h2 {
    font-size: 28px;
  }
  .comparison table {
    min-width: 550px;
    font-size: 10px;
  }
  .comparison th,
  .comparison td {
    padding: 14px 12px;
  }
  .comparison thead th {
    font-size: 11px;
  }
  .comparison > .fine {
    font-size: 10px;
  }
  .faq {
    display: block;
  }
  .faq > div:first-child {
    margin-bottom: 20px;
  }
  .faq h2 {
    font-size: 30px;
  }
  .faq summary {
    font-size: 13px;
  }
  .faq details p {
    font-size: 12px;
  }
  .cta {
    padding: 35px 29px;
    display: block;
    margin-bottom: 55px;
  }
  .cta h2 {
    font-size: 30px;
  }
  .cta p {
    font-size: 11px;
  }
  .cta .button {
    margin-top: 25px;
  }
  .cta:after {
    right: -250px;
    top: 80px;
  }
  .cta .eyebrow {
    font-size: 7px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .footer-top > div:first-child {
    grid-column: span 2;
  }
  .footer-top > div:first-child p {
    margin: 17px 0;
  }
  .footer-top > div > span {
    font-size: 8px;
    margin-bottom: 14px;
  }
  .footer-top > div > a:not(.brand) {
    font-size: 11px;
  }
  .footer-top > div:last-child {
    grid-column: span 2;
    flex-wrap: wrap;
    gap: 12px 19px;
  }
  .footer-top > div:last-child > span {
    width: 100%;
  }
  .footer-top > div:last-child > a {
    margin: 0;
    font-size: 9px;
  }
  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 8px;
  }
  .footer .brand img {
    width: 139px;
  }
  .auth-layout {
    display: block;
  }
  .auth-art {
    display: none;
  }
  .auth-main {
    padding: 25px 26px;
    min-height: 100vh;
  }
  .auth-form-wrap {
    padding: 55px 0;
    max-width: 450px;
  }
  .auth-form-wrap h1 {
    font-size: 33px;
  }
  .auth-form-wrap > p:first-of-type {
    font-size: 13px;
  }
  .auth-foot {
    font-size: 9px;
  }
  .portal-sidebar {
    display: none;
  }
  .portal-main {
    margin-left: 0;
  }
  .portal-top {
    height: 65px;
    padding: 0 22px;
  }
  .portal-top > span {
    display: none;
  }
  .portal-top .mobile-brand {
    display: block;
    color: var(--navy);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.04em;
  }
  .portal-top > a {
    font-size: 10px;
  }
  .portal-mobile-nav {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    padding: 9px 18px;
    background: #fff;
    border-bottom: 1px solid #e4ebdc;
  }
  .portal-mobile-nav a,
  .portal-mobile-nav button {
    font-size: 10px;
    color: #899a74;
    padding: 5px 7px;
  }
  .portal-content {
    padding: 26px 20px 60px;
  }
  .page-heading h1 {
    font-size: 28px;
  }
  .page-heading p {
    font-size: 11px;
    line-height: 1.8;
  }
  .page-heading .eyebrow {
    font-size: 7px;
  }
  .dashboard-welcome {
    padding: 26px 23px;
  }
  .dashboard-welcome h2 {
    font-size: 26px;
    line-height: 1.2;
  }
  .dashboard-welcome p {
    font-size: 12px;
  }
  .dashboard-welcome .button {
    font-size: 12px;
    padding: 12px 18px;
  }
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }
  .stat-grid article {
    padding: 19px 21px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .stat-grid strong {
    grid-column: 2;
    grid-row: 1/3;
    text-align: right;
    font-size: 21px;
    margin: auto 0;
  }
  .stat-grid span {
    font-size: 10px;
  }
  .stat-grid small {
    font-size: 9px;
  }
  .panel {
    padding: 23px 21px;
  }
  .panel-heading {
    align-items: flex-start;
  }
  .panel-heading h2 {
    font-size: 18px;
  }
  .panel-heading p {
    font-size: 10px;
    line-height: 1.8;
  }
  .panel-heading .button {
    font-size: 9px;
    padding: 8px;
    gap: 5px;
    white-space: normal;
  }
  .panel-heading .button .icon {
    width: 12px;
  }
  .empty-state {
    padding: 35px 0 18px;
  }
  .empty-state h3 {
    font-size: 17px;
  }
  .empty-state p {
    font-size: 11px;
  }
  .onboarding-grid {
    gap: 0;
  }
  .settings-form .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .form-grid .span-two {
    grid-column: auto;
  }
  .settings-form > p {
    font-size: 11px;
  }
  .subscription-panel {
    gap: 24px;
  }
  .subscription-panel > div:last-child {
    flex-direction: column;
    align-items: flex-start;
  }
  .subscription-panel table {
    font-size: 10px;
  }
  .panel table th,
  .panel table td {
    padding: 14px 8px;
  }
  .checkout-grid {
    gap: 0;
  }
  .checkout-grid h2 {
    font-size: 28px;
  }
  .notice {
    font-size: 11px;
    padding: 14px 16px;
  }
  .quote-confirm .button {
    font-size: 12px;
    gap: 10px;
  }
  .modal {
    padding: 30px 25px;
  }
  .modal h2 {
    font-size: 27px;
  }
  .modal .eyebrow {
    font-size: 7px;
    max-width: 270px;
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  .modal-actions .button {
    font-size: 12px;
  }
  .contact-page {
    padding-top: 48px;
    padding-bottom: 68px;
  }
  .contact-page h1 {
    font-size: 40px;
  }
  .contact-page > p {
    font-size: 14px;
  }
  .contact-email {
    font-size: 22px;
    margin: 27px 0 43px;
  }
  .contact-boxes {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .contact-boxes h3 {
    font-size: 24px;
  }
  .contact-boxes p {
    font-size: 13px;
  }
  .legal-page {
    padding: 45px 0 65px;
  }
  .legal-page h1 {
    font-size: 37px;
  }
  .legal-page article p {
    font-size: 13px;
  }
  .legal-page article h2 {
    font-size: 24px;
  }
  .not-found {
    padding: 70px 0;
  }
  .not-found h1 {
    font-size: 36px;
  }
  #toast {
    max-width: calc(100vw - 34px);
    width: max-content;
    font-size: 11px;
    bottom: 18px;
    padding: 14px 18px;
    line-height: 1.8;
  }
  .user-card small {
    max-width: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
  .button:hover {
    transform: none;
  }
}
/* Keep visually hidden table labels inside their scroll container. */
.table-scroll,
.table-check {
  position: relative;
}
.icon-btn.mobile-menu {
  display: none;
}
@media (max-width: 700px) {
  .icon-btn.mobile-menu {
    display: flex;
  }
}
/* Functional account text stays readable against the quiet surface colours. */
.portal-content .fine,
.stat-grid small,
.stat-grid span,
.sidebar-label,
.portal-top > span,
.checklist-row,
.auth-foot {
  color: #65745b;
}
.billing-caption,
.fx-note,
.pricing-note {
  color: #6c7b5f;
}