/* Mint visual edition: code-native illustrations informed by the owner's six references. */
.hero-visual {
  width: 100%;
  max-width: 580px;
  height: 790px;
  margin-inline: auto;
  isolation: isolate;
}
.hero-visual .scene-orbit {
  border: 0;
  background: radial-gradient(circle at 36% 34%, #dff7e0 0, #e7f8eb 54%, #f3fcf5 100%);
}
.hero-visual .orbit-one { width: 490px; height: 490px; max-width: 96%; top: 123px; left: 0; opacity: .76; }
.hero-visual .orbit-two { width: 240px; height: 240px; top: 485px; right: 0; left: auto; opacity: .48; }
.hero-visual .scene-platform { bottom: 22px; height: 100px; background: radial-gradient(ellipse, #208a4538, transparent 65%); filter: blur(15px); }
.hero-visual .scene-caption { top: 82px; left: 4px; width: 135px; color: #457867; font-size: 15px; font-weight: 500; line-height: 1.65; transform: rotate(-8deg); }
.hero-visual .scene-caption svg { width: 72px; height: 67px; stroke-width: 1.5; }
.hero-visual .hero-phone {
  width: 330px;
  top: 0;
  right: 15px;
  border: 8px solid #17221e;
  border-radius: 43px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 1px #eff3ee, 0 0 0 3px #757e76, 5px 3px 0 4px #bbc1b7, 8px 8px 0 5px #3e4942, 20px 30px 40px #16563228, inset 0 0 0 1px #fff;
  transform: perspective(1500px) rotateY(-7deg) rotateZ(4deg);
}
.hero-visual .hero-phone::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  background: linear-gradient(120deg, #050907, #111612 80%, #20302a);
  border-radius: 22px;
  box-shadow: inset 0 1px 2px #5c665d66;
  z-index: 3;
  pointer-events: none;
}
.hero-visual .phone-status { min-height: 43px; padding: 15px 20px 10px; font-size: 12px; color: #17241f; }
.hero-visual .phone-status > span { font-size: 11px; color: #223d31; }
.hero-visual .chat-header { padding: 13px 14px 16px; gap: 10px; border-bottom: 1px solid #e7eee7; }
.hero-visual .chat-header img { width: 39px; height: 39px; border-radius: 13px; box-shadow: 0 4px 8px #087a2c18; }
.hero-visual .chat-header strong { font-size: 17px; color: #0c4a35; font-weight: 800; }
.hero-visual .chat-header div > span { font-size: 12px; color: #6d8277; }
.hero-visual .chat-surface {
  padding: 14px;
  gap: 11px;
  background-color: #f0f8f0;
  background-image: radial-gradient(#75b28c1c .65px, transparent .8px);
  background-size: 10px 10px;
}
.hero-visual .day-label { background: #fff; border: 1px solid #eff6ef; border-radius: 13px; color: #7a8b81; font-size: 11px; padding: 4px 12px; }
.hero-visual .voice-message {
  background: linear-gradient(125deg, #dcf8cf, #d1f1c3);
  border: 1px solid #bee8b8;
  border-radius: 17px 5px 17px 17px;
  padding: 14px 12px 24px;
  box-shadow: 0 5px 8px #348a2612, inset 0 1px #ffffffab;
}
.hero-visual .voice-play { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: linear-gradient(145deg, #5e94ab, #2a6380); box-shadow: 1px 3px 4px #40675828, inset 0 1px #a8d4e4; color: #fff; flex: 0 0 33px; font-size: 14px; }
.hero-visual .voice-message > svg { color: #13834d; width: 20px; height: 20px; }
.hero-visual .voice-duration { color: #4e9967; font-size: 11px; bottom: 5px; }
.hero-visual .waveform i, .step-chat .waveform i { background: linear-gradient(#7fc783, #4bab6b); border-radius: 3px; }
.hero-visual .message { padding: 13px 15px 8px; font-size: 15px; line-height: 1.85; background: linear-gradient(130deg, #e0f8d4, #d4f3c7); color: #1f4936; border: 1px solid #c3eabd; border-radius: 17px 5px 17px 17px; box-shadow: 0 5px 8px #348a2610, inset 0 1px #ffffffa8; }
.hero-visual .message small { font-size: 11px; color: #4a9270; margin-top: 6px; }
.hero-visual .message small i { color: #319da9; }
.hero-visual .chat-create { border-radius: 12px; min-height: 46px; background: linear-gradient(120deg, #14503d, #06673b); border: 1px solid #146a48; box-shadow: inset 0 1px #ffffff24, 0 5px 10px #0d64391c; font-size: 16px; font-weight: 700; padding: 10px; }
.hero-visual .chat-create:hover { background: linear-gradient(120deg, #0b432f, #03572e); }
.hero-visual .chat-compose { background: #fff; color: #23714c; padding: 12px 14px 17px; gap: 9px; }
.hero-visual .chat-compose > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #fff; background: linear-gradient(120deg, #44b264, #138545); font-size: 25px; }
.hero-visual .chat-compose > span:nth-child(2) { border: 1px solid #e1e8e0; padding: 6px 12px; font-size: 13px; color: #91a098; box-shadow: inset 0 1px 2px #23473608; }
.hero-visual .hero-quote {
  top: 525px;
  bottom: auto;
  left: 15px;
  width: 328px;
  border-radius: 26px;
  border: 1px solid #d8e6d7;
  background: linear-gradient(155deg, #fff, #fbfefb);
  box-shadow: 0 3px 0 1px #f8fff7, -2px 7px 0 #d8e8d2, -4px 11px 0 #c8ddc0, -8px 23px 32px #2b793429;
  transform: perspective(1400px) rotateY(5deg) rotateZ(-5deg);
}
.hero-visual .mini-quote-header { padding: 17px 17px 14px; gap: 9px; border-color: #e6eee5; }
.hero-visual .sample-logo { width: 40px; height: 40px; flex-basis: 40px; border: 0; border-radius: 13px; background: linear-gradient(140deg, #f3ecdf, #e9dfc9); color: #756b55; font-size: 28px; box-shadow: inset 0 1px #fff; }
.hero-visual .mini-quote-header strong { font-size: 16px; color: #112f25; }
.hero-visual .mini-quote-header div > span { font-size: 12px; color: #7d8c81; }
.hero-visual .draft-tag { font-size: 12px; background: #e5f8da; color: #34724c; border-radius: 8px; padding: 4px 8px; }
.hero-visual .mini-quote-body { padding: 13px 18px 0; }
.hero-visual .mini-quote-body > p { font-size: 13px; color: #788a7c; }
.hero-visual .mini-quote-body h3 { font-size: 24px; color: #122f24; letter-spacing: -.6px; margin: 7px 0 12px; }
.hero-visual .mini-quote-body > div:not(.mini-total) { display: none; }
.hero-visual .mini-quote-body > .mini-total { margin: 0; padding: 12px; background: linear-gradient(110deg, #e8f8dc, #eff9e9); border: 1px solid #e2f2da; border-radius: 12px; font-size: 14px; color: #205439; }
.hero-visual .mini-total > bdi { font-size: 29px; color: #062e20; letter-spacing: -.7px; }
.hero-visual .mini-quote-footer { min-height: 49px; font-size: 14px; color: #276449; gap: 8px; }
.hero-visual .mini-quote-footer svg { width: 21px; height: 21px; }
.hero-visual .mini-quote-footer:hover { background: #f0f9ea; }
.hero-visual .floating-done { display: none; }
.hero-visual .illustration-label { bottom: -22px; left: 25px; color: #7e9486; font-size: 12px; }

/* Small process objects: a voice bubble, an editable amount, a quote link and a signature. */
.step-scene { margin-top: auto; min-height: 146px; }
.step-chat { gap: 13px; padding-top: 22px; }
.step-chat > div { border: 1px solid #bde2b6; background: linear-gradient(135deg, #e0f5d3, #c4e9b6); padding: 17px 15px; border-radius: 21px 21px 6px 21px; box-shadow: 0 8px 16px #33894312, inset 0 1px #ffffffb5; transform: rotate(2deg); color: #176e42; }
.step-chat > div > span:first-child { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; font-size: 13px; color: #fff; background: linear-gradient(130deg, #218e53, #0d663e); border: 1px solid #5bad74; border-radius: 50%; box-shadow: inset 0 1px #b3ddad88; }
.step-chat .waveform { height: 33px; gap: 2px; }
.step-chat svg { width: 20px; height: 20px; }
.step-chat .micro-bubble { align-self: flex-end; min-width: 126px; padding: 11px 17px; border-color: #dceadc; border-radius: 15px 15px 5px 15px; box-shadow: 0 8px 15px #3a884413; font-size: 15px; color: #25543c; transform: rotate(-3deg); }
.step-chat .micro-bubble i { font-size: 14px; }
.step-edit { padding: 23px 16px 16px; border-radius: 20px; background: linear-gradient(140deg, #fff, #fcfffa); border: 1px solid #e0edde; box-shadow: 0 3px 0 #f8fff6, 3px 7px 0 #dcebd4, 0 15px 24px #42783c16; margin-top: 26px; transform: rotate(-2deg); }
.step-edit > span { font-size: 14px; color: #506e5a; margin-bottom: 17px; }
.step-edit > div { border-radius: 12px; border: 1px solid #6cad71; background: #f5fcf2; padding: 10px; box-shadow: 0 0 0 3px #eaf5e8; }
.step-edit bdi { font-size: 24px; color: #113f2d; font-weight: 750; }
.step-edit svg { color: #258349; width: 21px; height: 21px; }
.step-share { min-height: 141px; margin-top: 29px; padding: 27px 16px; border-radius: 19px; border-color: #dceadb; background: linear-gradient(155deg, #fff, #fbfef9); gap: 12px; box-shadow: 0 4px 0 #f7fff4, 0 7px 0 #dcebd6, 0 17px 22px #3e7d3715; transform: rotate(2deg); }
.step-share > svg { width: 37px; height: 43px; flex: 0 0 37px; color: #1c8048; background: #eff8e9; border-radius: 9px; padding: 6px; }
.step-share > span > strong { font-size: 15px; color: #214632; }
.step-share > span > span { font-size: 14px; color: #758975; margin-top: 4px; }
.step-share .send-circle { width: 44px; height: 44px; bottom: -15px; left: 13px; border: 3px solid #f4fbf0; background: linear-gradient(140deg, #32b566, #0c733f); box-shadow: 0 5px 11px #156b4425, inset 0 1px #afffc1; }
.step-sign { min-height: 141px; margin-top: 29px; padding: 16px; border-radius: 20px; border-color: #d9e9d5; background: linear-gradient(145deg, #fff, #f8fcf5); box-shadow: 0 3px 0 #f7fff4, 3px 7px 0 #dcebd6, 0 17px 22px #3e7d3715; transform: rotate(-2deg); }
.step-sign > svg { height: 65px; width: 158px; color: #235e40; stroke-width: 1.8; }
.step-sign > span { color: #19663a; background: #e7f6df; font-size: 14px; padding: 4px 12px; border: 1px solid #d8eccd; border-radius: 8px; }
.step-sign > span svg { width: 15px; height: 15px; }

/* Customer-facing document: a white branded sheet, kept visually distinct from the surrounding website. */
.document-stage { padding: 22px 18px 34px; max-width: 550px; margin-inline: auto; }
.document-stage .document-back { inset: 28px 20px 66px; transform: rotate(4deg); background: #e9f4e6; border-color: #cbdcc6; border-radius: 22px; box-shadow: 8px 17px 30px #52845019; }
.document-stage .document-paper { background: #fff; border: 1px solid #d9e4d7; border-radius: 22px; box-shadow: 0 2px 0 #fff, 0 5px 0 #e7f0e2, 0 22px 45px #31653a20; transform: rotate(-2deg); color: #244330; }
.document-stage .document-cover { height: 236px; background: #345339; }
.document-stage .document-cover img { opacity: 1; }
.document-stage .document-cover::after { background: linear-gradient(180deg, #102a29b5, #112b2618 46%, #0d2418d6); }
.document-stage .document-cover-overlay { inset: 23px; color: #fff; }
.document-stage .contractor-brand > span { width: 42px; height: 42px; border-radius: 12px; border-color: #edffe370; background: #f3ffe629; backdrop-filter: blur(6px); color: #f7ffef; }
.document-stage .contractor-brand p { font-size: 18px; }
.document-stage .contractor-brand small { font-size: 12px; color: #e0eddd; }
.document-stage .document-cover h3 { max-width: 330px; font-size: 32px; line-height: 1.2; font-weight: 750; text-shadow: 0 2px 15px #173f32aa; }
.document-stage .document-content { padding: 24px; }
.document-stage .document-meta { font-size: 14px; color: #7c8f7e; border-color: #e4ece2; padding-bottom: 16px; }
.document-stage .document-meta strong { color: #3d6449; }
.document-stage .document-row { font-size: 16px; border-color: #e6eee3; padding: 16px 0; }
.document-stage .document-row i { color: #91ab8c; font-size: 11px; }
.document-stage .document-tax { color: #788d77; font-size: 12px; padding: 18px 0; }
.document-stage .document-total { border-radius: 12px; background: linear-gradient(125deg, #e4f5db, #f0f9e9); border: 1px solid #d8eccc; padding: 16px; color: #265237; font-size: 14px; }
.document-stage .document-total > bdi { color: #0b3b28; font-size: 31px; font-weight: 800; }
.document-stage .document-sign { border: 1px solid #226845; border-radius: 12px; color: #fff; background: linear-gradient(130deg, #14573d, #08713d); min-height: 49px; font-size: 15px; font-weight: 600; box-shadow: inset 0 1px #ffffff28, 0 7px 14px #2c6e3712; }
.document-stage .document-sign:hover { background: #075c31; }
.document-stage .quote-seal { top: 59px; bottom: auto; left: -10px; padding: 13px 17px; border-radius: 18px; background: #ffffffed; border: 1px solid #e0edda; color: #376646; box-shadow: 0 6px 0 #e1efda99, 0 15px 24px #285c3e24; transform: rotate(5deg); }
.document-stage .quote-seal > svg { width: 32px; height: 32px; color: #239b50; }
.document-stage .quote-seal span { font-size: 14px; }
.document-stage .document-caption { font-size: 12px; margin-top: 27px; color: #83967f; }

/* Browser previews: clean chrome, mint editing focus, legible customer states. */
.edit-preview, .dashboard-preview { background: linear-gradient(145deg, #fff, #fcfefa); border: 1px solid #d6e7d1; border-radius: 20px; padding: 21px; margin-inline: 29px; box-shadow: 0 3px 0 #f8fff4, 3px 7px 0 #dcecd5, 0 20px 32px #32753615; }
.edit-preview { transform: perspective(1400px) rotateY(3deg) rotateZ(-1.3deg); }
.dashboard-preview { transform: perspective(1400px) rotateY(-3deg) rotateZ(1.2deg); margin-bottom: 83px; }
.edit-preview .mock-toolbar, .dashboard-preview .mock-toolbar { padding-bottom: 17px; border-color: #e3eddf; color: #2a6040; font-size: 14px; }
.edit-preview .mock-toolbar i { width: 8px; height: 8px; background: #37a562; box-shadow: 0 0 0 4px #eaf6e5; margin-inline-end: 3px; }
.dashboard-preview .mock-toolbar > span { font-size: 12px; color: #83927a; }
.edit-preview .edit-line { padding-block: 20px; font-size: 16px; color: #305538; border-color: #e6eee1; }
.edit-preview .editable-value { min-width: 133px; background: #f4fbef; border: 1px solid #70a964; box-shadow: 0 0 0 4px #edf7e7; border-radius: 10px; color: #174e30; padding: 9px 12px; }
.edit-preview .editable-value i { background: #258049; }
.edit-preview .terms-line { font-size: 14px; gap: 12px; }
.edit-preview .terms-line > span:last-child { color: #7d9175; }
.edit-preview .edit-actions { font-size: 13px; color: #4d7547; padding-top: 17px; gap: 12px; }
.edit-preview .edit-actions > span { line-height: 1.55; }
.edit-preview .edit-actions > button { border: 1px solid #bfd9b3; border-radius: 10px; background: linear-gradient(130deg, #e8f7dd, #edf9e5); font-size: 14px; color: #286334; padding: 10px 12px; }
.edit-preview .edit-actions > button:hover { background: #dff2d2; }
.dashboard-preview .dash-row { grid-template-columns: 33px 1fr auto auto; gap: 10px; padding: 18px 0; border-color: #e8eee4; }
.dashboard-preview .customer-initial { width: 33px; height: 33px; border-radius: 11px; background: linear-gradient(130deg, #d9efd0, #e6f5de); border-color: #d4e9c9; color: #3e7544; font-size: 12px; }
.dashboard-preview .customer-initial.sand { background: #f7f1e2; color: #987c47; border-color: #eee4cb; }
.dashboard-preview .customer-initial.blue { background: #eaf2f1; color: #678b88; border-color: #dce9e5; }
.dashboard-preview .dash-row strong { font-size: 14px; color: #214d34; }
.dashboard-preview .dash-row small { font-size: 12px; color: #84947d; margin-top: 4px; }
.dashboard-preview .dash-row > bdi { display: block; font-size: 13px; color: #58794e; white-space: nowrap; }
.dashboard-preview .quote-status { padding: 5px 8px; font-size: 12px; border-radius: 7px; }
.dashboard-preview .signed { background: #dff2d5; color: #368144; }
.dashboard-preview .opened { background: #fbf0d5; color: #997b31; }
.dashboard-preview .ready { background: #eef3e9; color: #7a8d6f; }
.notification-pill { bottom: 25px; left: 34px; max-width: calc(100% - 68px); padding: 13px 17px; border-radius: 17px; background: linear-gradient(135deg, #fff, #fbfef9); border: 1px solid #d9e9d1; box-shadow: 0 4px 0 #e2efdacc, 0 14px 23px #2c743424; gap: 11px; transform: rotate(-2deg); }
.notification-pill .notification-icon { height: 39px; width: 39px; flex: 0 0 39px; border-radius: 13px; border: 1px solid #62b77b; background: linear-gradient(140deg, #35b863, #0b733d); box-shadow: inset 0 1px #c0eeb1, 0 4px 8px #1d774326; }
.notification-pill strong { font-size: 14px; color: #2b5436; }
.notification-pill small { font-size: 12px; color: #7c9372; }
.notification-pill > svg { display: block; flex: 0 0 20px; height: 20px; width: 20px; margin-inline-start: 0; color: #399c54; }

.final-visual { height: 300px; }
.final-visual .final-orbit { border: 0; width: 355px; height: 355px; top: -40px; left: 25px; background: radial-gradient(circle, #dff4d625, #b0dca706 70%); }
.final-visual .final-orbit::after { border-color: #a1d7a32e; inset: 25px; }
.final-visual .final-bubble { padding: 22px 27px 14px; top: 10px; right: 12px; border-radius: 26px 26px 6px 26px; border: 1px solid #bfdab38a; background: linear-gradient(120deg, #e1f6d5, #cbedba); box-shadow: 3px 5px 0 #8dc27c77, 0 22px 26px #062b2525, inset 0 1px #ffffffe6; color: #1a4d33; font-size: 24px; }
.final-visual .final-bubble > small { color: #3d9673; font-size: 13px; }
.final-visual .final-bubble.answer { top: 140px; left: 0; right: auto; padding: 24px; border-radius: 23px; border-color: #dbeacc; background: linear-gradient(150deg, #fff, #f5fbef); color: #16432c; box-shadow: -2px 4px 0 #eef8e5, -4px 9px 0 #bbd6ae, 0 22px 28px #082c2128; gap: 17px; }
.final-visual .answer > span { width: 47px; height: 54px; flex: 0 0 47px; border-radius: 12px; border-color: #cce3bd; background: linear-gradient(135deg, #e4f5d7, #d6edc7); color: #2d8044; box-shadow: 1px 3px 0 #c2dbae; }
.final-visual .answer > p { font-size: 23px; color: #205135; }
.final-visual .answer p > small { font-size: 13px; color: #7b9770; margin-top: 6px; }
.final-visual .big-check { bottom: -6px; right: 56px; width: 61px; height: 61px; border-radius: 50%; border-color: #68b883; background: linear-gradient(135deg, #38b965, #086b3e); box-shadow: 2px 4px 0 #0c653c, 6px 12px 18px #06312048, inset 0 2px #a4e09d; transform: rotate(11deg); }

@media (max-width: 1150px) and (min-width: 901px) {
  .hero-visual .hero-phone { right: 10px; width: 306px; }
  .hero-visual .hero-quote { width: 300px; top: 533px; left: 9px; }
  .hero-visual .scene-caption { left: 0; top: 111px; width: 102px; font-size: 14px; }
  .dashboard-preview .dash-row { grid-template-columns: 30px 1fr auto; }
  .dashboard-preview .dash-row > bdi { display: none; }
  .edit-preview, .dashboard-preview { margin-inline: 21px; padding: 18px; }
  .edit-preview .edit-actions { flex-direction: column; align-items: flex-start; }
  .edit-preview .edit-actions > button { align-self: flex-end; }
  .notification-pill { max-width: calc(100% - 40px); left: 20px; padding-inline: 12px; gap: 9px; }
  .notification-pill > svg { display: none; }
}
@media (max-width: 900px) {
  .hero-visual { width: 580px; height: 790px; margin-top: 8px; }
  .hero-visual .hero-phone { width: 330px; right: 65px; }
  .hero-visual .hero-quote { left: 53px; top: 527px; }
  .hero-visual .scene-caption { left: 29px; top: 84px; }
  .hero-visual .illustration-label { left: 75px; }
  .step-scene { max-width: 275px; width: 100%; margin-inline: auto; }
  .document-stage { width: 100%; }
  .edit-preview, .dashboard-preview { padding: 18px; margin-inline: 20px; }
  .edit-preview .edit-actions { flex-direction: column; align-items: flex-start; }
  .edit-preview .edit-actions > button { align-self: flex-end; }
  .dashboard-preview .dash-row { grid-template-columns: 30px 1fr auto; gap: 8px; }
  .dashboard-preview .dash-row > bdi { display: none; }
  .notification-pill { left: 19px; max-width: calc(100% - 38px); padding: 12px; gap: 8px; }
  .notification-pill > svg { display: none; }
  .notification-pill strong { font-size: 13px; }
  .notification-pill small { font-size: 12px; }
  .notification-pill .notification-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .final-visual { max-width: 470px; width: 100%; margin-inline: auto; }
}
@media (max-width: 600px) {
  .hero-visual { max-width: 380px; width: 100%; height: 784px; margin-top: 16px; }
  .hero-visual .hero-phone { width: 300px; max-width: calc(100% - 25px); right: 16px; top: 0; border-width: 7px; border-radius: 39px; transform: perspective(1300px) rotateY(-5deg) rotateZ(3deg); box-shadow: 0 0 0 1px #eff3ee, 0 0 0 2px #81877b, 4px 3px 0 3px #b6bcb0, 6px 6px 0 4px #38483f, 12px 25px 30px #226f3430; }
  .hero-visual .phone-status { min-height: 39px; padding: 13px 18px 8px; }
  .hero-visual .hero-phone::before { top: 8px; height: 21px; width: 77px; }
  .hero-visual .chat-header { gap: 8px; padding: 12px 12px 14px; }
  .hero-visual .chat-header img { width: 36px; height: 36px; }
  .hero-visual .chat-header strong { font-size: 16px; }
  .hero-visual .chat-header div > span { font-size: 11px; }
  .hero-visual .chat-surface { padding: 12px; gap: 10px; }
  .hero-visual .voice-message { padding: 12px 11px 22px; gap: 8px; }
  .hero-visual .voice-play { width: 30px; height: 30px; flex-basis: 30px; }
  .hero-visual .message { font-size: 14px; line-height: 1.9; padding: 12px 13px 7px; }
  .hero-visual .chat-create { min-height: 46px; font-size: 15px; }
  .hero-visual .chat-compose { padding: 11px 12px 16px; }
  .hero-visual .hero-quote { top: 524px; width: 305px; max-width: calc(100% - 25px); left: 10px; border-radius: 23px; transform: perspective(1300px) rotateY(4deg) rotateZ(-4deg); }
  .hero-visual .mini-quote-header { padding: 16px 14px 12px; gap: 8px; }
  .hero-visual .sample-logo { width: 37px; height: 37px; flex-basis: 37px; font-size: 25px; }
  .hero-visual .mini-quote-header strong { font-size: 15px; }
  .hero-visual .mini-quote-header div > span { font-size: 11px; }
  .hero-visual .draft-tag { font-size: 11px; padding: 4px 7px; }
  .hero-visual .mini-quote-body { padding: 12px 16px 0; }
  .hero-visual .mini-quote-body > p { font-size: 12px; }
  .hero-visual .mini-quote-body h3 { font-size: 23px; margin: 7px 0 12px; }
  .hero-visual .mini-quote-body > .mini-total { padding: 12px 10px; font-size: 14px; }
  .hero-visual .mini-total > bdi { font-size: 28px; }
  .hero-visual .mini-quote-footer { min-height: 50px; font-size: 14px; }
  .hero-visual .scene-caption { display: none; }
  .hero-visual .orbit-one { width: 365px; height: 365px; top: 172px; left: 0; }
  .hero-visual .orbit-two { width: 234px; height: 234px; top: 506px; right: 0; }
  .hero-visual .illustration-label { bottom: -21px; left: 17px; font-size: 11px; }
  .step-scene { max-width: 260px; margin-top: 26px; }
  .step-chat { min-height: 162px; padding-top: 0; }
  .step-edit, .step-share, .step-sign { min-height: 149px; }
  .step-edit > span, .step-share > span > span, .step-sign > span { font-size: 15px; }
  .step-share > span > strong { font-size: 16px; }
  .document-stage { padding: 18px 9px 28px; }
  .document-stage .document-paper { border-radius: 18px; transform: rotate(-1.5deg); }
  .document-stage .document-back { inset: 24px 11px 66px; border-radius: 18px; transform: rotate(3deg); }
  .document-stage .document-cover { height: 206px; }
  .document-stage .document-cover-overlay { inset: 19px; }
  .document-stage .document-cover h3 { font-size: 29px; max-width: 255px; }
  .document-stage .contractor-brand p { font-size: 17px; }
  .document-stage .document-content { padding: 19px 17px 20px; }
  .document-stage .document-meta { font-size: 14px; gap: 12px; }
  .document-stage .document-row { font-size: 14px; gap: 10px; padding: 15px 0; }
  .document-stage .document-row > span { gap: 8px; }
  .document-stage .document-row i { font-size: 10px; }
  .document-stage .document-tax { font-size: 12px; flex-direction: column; gap: 7px; }
  .document-stage .document-tax span { justify-content: space-between; }
  .document-stage .document-total { padding: 14px 11px; font-size: 13px; gap: 9px; }
  .document-stage .document-total > bdi { font-size: 28px; }
  .document-stage .document-sign { font-size: 14px; }
  .document-stage .quote-seal { top: 35px; left: -4px; padding: 10px 12px; border-radius: 13px; gap: 7px; transform: rotate(4deg); }
  .document-stage .quote-seal > svg { width: 27px; height: 27px; }
  .document-stage .quote-seal span { font-size: 12px; }
  .edit-preview, .dashboard-preview { margin-inline: 19px; padding: 17px; border-radius: 17px; transform: none; }
  .edit-preview .mock-toolbar, .dashboard-preview .mock-toolbar { font-size: 14px; }
  .edit-preview .edit-line { font-size: 14px; gap: 10px; }
  .edit-preview .editable-value { min-width: 120px; padding: 9px 10px; font-size: 17px; }
  .edit-preview .terms-line { font-size: 14px; }
  .edit-preview .edit-actions { flex-direction: column; align-items: stretch; gap: 12px; font-size: 14px; }
  .edit-preview .edit-actions > button { align-self: stretch; min-height: 46px; font-size: 14px; }
  .dashboard-preview { margin-bottom: 88px; }
  .dashboard-preview .dash-row { grid-template-columns: 31px 1fr auto; gap: 8px; }
  .dashboard-preview .customer-initial { width: 31px; height: 31px; font-size: 12px; }
  .dashboard-preview .dash-row strong { font-size: 14px; }
  .dashboard-preview .dash-row small { font-size: 13px; }
  .dashboard-preview .quote-status { font-size: 12px; padding: 5px 7px; }
  .notification-pill { left: 17px; max-width: calc(100% - 34px); bottom: 23px; padding: 12px; gap: 9px; border-radius: 14px; }
  .notification-pill strong { font-size: 14px; }
  .notification-pill small { font-size: 12px; }
  .notification-pill .notification-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .final-visual { height: 292px; max-width: 365px; }
  .final-visual .final-orbit { width: 280px; height: 280px; left: 0; top: 10px; }
  .final-visual .final-bubble { right: 9px; top: 5px; padding: 20px 22px 13px; font-size: 21px; }
  .final-visual .final-bubble.answer { top: 134px; left: 5px; right: auto; padding: 19px 16px; gap: 12px; }
  .final-visual .answer > p { font-size: 21px; }
  .final-visual .answer p > small { font-size: 12px; }
  .final-visual .answer > span { width: 41px; height: 48px; flex-basis: 41px; }
  .final-visual .big-check { right: 23px; bottom: 2px; width: 54px; height: 54px; }
}
@media (max-width: 360px) {
  .hero-visual { height: 780px; }
  .hero-visual .hero-phone { max-width: calc(100% - 18px); right: 11px; }
  .hero-visual .hero-quote { max-width: calc(100% - 16px); left: 6px; top: 530px; }
  .hero-visual .chat-header { padding-inline: 10px; gap: 7px; }
  .hero-visual .chat-header img { width: 33px; height: 33px; }
  .hero-visual .chat-header strong { font-size: 15px; }
  .hero-visual .chat-header div > span { font-size: 10px; }
  .hero-visual .chat-surface { padding: 10px; }
  .hero-visual .message { padding-inline: 10px; }
  .hero-visual .mini-quote-header { padding-inline: 12px; gap: 7px; }
  .hero-visual .mini-quote-header strong { font-size: 14px; }
  .hero-visual .mini-quote-body { padding-inline: 13px; }
  .hero-visual .mini-quote-body h3 { font-size: 21px; }
  .hero-visual .mini-total > bdi { font-size: 26px; }
  .document-stage .document-content { padding-inline: 14px; }
  .document-stage .document-total { font-size: 12px; }
  .document-stage .document-total > bdi { font-size: 26px; }
  .document-stage .document-meta { font-size: 13px; }
  .document-stage .quote-seal { padding: 8px 10px; gap: 5px; }
  .document-stage .quote-seal span { font-size: 11px; }
  .edit-preview, .dashboard-preview { margin-inline: 13px; padding: 14px; }
  .edit-preview .editable-value { min-width: 106px; font-size: 16px; }
  .dashboard-preview .dash-row { grid-template-columns: 1fr auto; }
  .dashboard-preview .customer-initial { display: none; }
  .notification-pill { max-width: calc(100% - 24px); left: 12px; padding: 10px; gap: 8px; }
  .notification-pill strong { font-size: 13px; }
  .notification-pill small { font-size: 11px; }
  .final-visual .final-bubble { font-size: 19px; padding-inline: 19px; }
  .final-visual .final-bubble.answer { padding: 17px 13px; gap: 10px; left: 3px; }
  .final-visual .answer > p { font-size: 19px; }
  .final-visual .answer p > small { font-size: 11px; }
}
/* Keep every transformed edge and the result action within the illustration. */
.hero-visual { height: 850px; }
.hero-visual .hero-phone { top: 14px; }
.hero-visual .illustration-label { bottom: 0; }
@media (max-width: 600px) { .hero-visual { height: 841px; } .hero-visual .hero-phone { top: 12px; } }
/* Allow breathing room for the graphite rim and the rotated paper edges. */
@media (min-width: 1151px) { .hero-visual .hero-phone { right: 30px; } }
@media (min-width: 901px) and (max-width: 1150px) { .hero-visual .hero-phone { right: 25px; } }
@media (min-width: 361px) and (max-width: 600px) { .hero-visual .hero-phone { right: 24px; } }
@media (max-width: 360px) { .hero-visual .hero-phone { max-width: calc(100% - 34px); right: 15px; } .hero-visual .hero-quote { max-width: calc(100% - 24px); left: 11px; } }
@media (min-width: 901px) and (max-width: 1150px) { .hero-visual .hero-quote { left: 17px; } }
@media (min-width: 361px) and (max-width: 600px) { .hero-visual .hero-quote { left: 15px; } }
@media (max-width: 360px) { .hero-visual .hero-phone { max-width: calc(100% - 44px); right: 22px; } }

/* The approved artwork already contains the paper angle and mint edges. */
.hero-visual .hero-quote-artwork {
  top: 456px;
  width: 300px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
  filter: drop-shadow(0 12px 15px #27683926);
  pointer-events: none;
}
/* Let clicks through the transparent corner to the phone underneath. */
.hero-quote-artwork > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
  clip-path: polygon(0 0, 89% 0, 100% 91%, 100% 100%, 0 100%);
}
.hero-quote-artwork:focus-visible { outline: 3px solid #098853; outline-offset: 5px; border-radius: 20px; }
@media (max-width: 1150px) {
  .hero-visual .hero-quote-artwork { top: 518px; width: 254px; }
}
@media (max-width: 600px) {
  .hero-visual .hero-quote-artwork { top: 510px; width: 254px; }
}

/* September references: detailed, responsive product demonstrations. */
.ref-steps { gap: 20px; align-items: stretch; }
.ref-steps .step { padding: 52px 16px 20px; border: 1px solid #deeee5; border-radius: 26px; background: linear-gradient(155deg,#fff,#f7fdf8); box-shadow: 0 14px 28px #276b4010; display: flex; flex-direction: column; overflow: visible; }
.ref-steps .step::before, .ref-steps .step::after { display: none; }
.ref-step-number { position: absolute; inset: -28px auto auto 50%; transform: translateX(-50%); width: 64px; height: 64px; border: 7px solid #eef8ef; outline: 1px solid #e0f0e2; border-radius: 50%; display: grid; place-items: center; color: #073f2d; background: linear-gradient(140deg,#e5f8e4,#c8edce); box-shadow: inset 0 0 12px #fff; font: 700 25px Rubik,sans-serif; }
.ref-steps .step h3 { font-size: 26px; margin: 8px 0 12px; text-align: center; }
.ref-steps .step > p { font-size: 17px; line-height: 1.55; text-align: center; margin: 0 0 18px; min-height: 54px; }
.ref-step-demo { display: block; width: 100%; margin: auto 0 0; min-width: 0; height: 286px; border: 0; padding: 0; font-family: inherit; text-align: start; color: #153e31; position: relative; }
.ref-step-demo:focus-visible { outline: 3px solid #07995b; outline-offset: 5px; }
.ref-chat { border-radius: 14px; background: #eef7eb; overflow: hidden; box-shadow: 0 5px 8px #1241260e; }
.ref-chat-bar { display: flex; align-items: center; gap: 8px; padding: 10px; background: linear-gradient(120deg,#358d79,#216759); color: white; height: 49px; }
.ref-chat-bar > svg { width: 23px; height: 23px; }
.ref-chat-bar > strong { flex: 1; font-size: 13px; }
.ref-chat-bar small { display: block; font-size: 9px; font-weight: 400; color: #d1eee2; }
.ref-chat-content { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; background: radial-gradient(#77b18714 1px,transparent 1px) 0 0/10px 10px; }
.ref-chat-bubble { background: linear-gradient(130deg,#eeffdf,#d9f5cb); padding: 8px 10px; border-radius: 10px 2px 10px 10px; box-shadow: 0 2px 4px #17402010; font-size: 11px; line-height: 1.5; max-width: 96%; }
.ref-chat-bubble small { display: block; text-align: left; color: #72948b; font-size: 9px; line-height: 1.2; }
.ref-chat-bubble small i { color: #39a3c7; font-style: normal; }
.ref-voice { display: flex; width: 94%; align-items: center; gap: 8px; padding-block: 10px; position: relative; }
.ref-voice > b { display: grid; place-items: center; width: 29px; height: 29px; flex-shrink: 0; font-size: 13px; border-radius: 50%; background: linear-gradient(#43ce76,#06944c); color: white; }
.ref-voice > small { position: absolute; bottom: 2px; inset-inline-end: 13px; }
.ref-wave { display: flex; gap: 2px; height: 29px; align-items: center; flex: 1; overflow: hidden; }
.ref-wave i { display: block; width: 3px; min-width: 2px; height: min(var(--bar),26px); border-radius: 5px; background: #3fbb75; }
.ref-attachment { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 6px; background: #fff; font-size: 10px; width: 94%; }
.ref-attachment img { width: 55px; height: 38px; object-fit: cover; border-radius: 6px; }
.ref-attachment small { display: block; color: #86948e; }
.ref-attachment svg { width: 17px; margin-inline-start: auto; }
.ref-finished { display: flex; align-items: center; gap: 7px; margin-inline-start: auto; font-size: 13px; padding: 6px 12px; }
.ref-finished svg { width: 19px; height: 19px; padding: 3px; border-radius: 50%; color: white; background: #0ba95a; }
.ref-editor { border: 1px solid #e2eee5; border-radius: 16px; padding: 11px; background: #fff; box-shadow: -3px 5px 0 #e7f3e3,0 9px 17px #236b3420; }
.ref-mini-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; }
.ref-mini-heading svg { width: 21px; height: 21px; color: #288b59; }
.ref-mini-labels { display: flex; justify-content: space-between; background: #f2f5f3; border-radius: 5px; padding: 7px; font-size: 10px; }
.ref-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 12px 5px; border-bottom: 1px solid #eaf0eb; font-size: 10px; }
.ref-mini-row > span { flex: 1; }
.ref-mini-row > bdi { white-space: nowrap; font-size: 11px; }
.ref-mini-row svg { width: 15px; height: 15px; flex-shrink: 0; }
.ref-row-active { outline: 1px solid #74c58c; border-radius: 6px; background: #f9fffa; }
.ref-row-active bdi { padding: 3px; border: 1px solid #77bdfa; border-radius: 4px; background: #fff; }
.ref-mini-add { display: block; font-size: 11px; color: #168651; margin: 10px 2px; }
.ref-mini-total { display: flex; justify-content: space-between; gap: 5px; background: #e5f7e7; border-radius: 8px; padding: 10px 8px; font-size: 12px; font-weight: 700; }
.ref-mini-total bdi { font: 700 21px Rubik,sans-serif; white-space: nowrap; }
.ref-share { background: transparent; padding: 8px 12px 0; }
.ref-share-doc { display: flex; height: 100%; flex-direction: column; position: relative; padding: 16px 13px 12px; border: 1px solid #e1eae2; background: linear-gradient(135deg,#fff,#fcfffc); border-radius: 18px 8px 18px 18px; box-shadow: 0 5px 0 #d6edd2,0 10px 18px #4e8a3620; }
.ref-share-doc > svg { width: 29px; height: 33px; color: #158455; margin-bottom: 8px; }
.ref-share-doc > small { position: absolute; left: 13px; top: 29px; color: #8e9a94; font-size: 10px; }
.ref-share-doc > strong { font-size: 20px; }
.ref-skeleton { display: flex; flex-direction: column; gap: 9px; margin: 17px 0; }
.ref-skeleton i { height: 6px; border-radius: 4px; background: #e9eceb; width: 100%; }
.ref-skeleton i:nth-child(2) { width: 82%; }
.ref-skeleton i:nth-child(3) { width: 92%; }
.ref-skeleton i:nth-child(4) { width: 66%; }
.ref-mini-link { color: #6a8878; font-size: 11px; margin-top: auto; margin-bottom: 10px; }
.ref-share-button { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,#20c773,#00a453); border-radius: 12px; border: 1px solid #12bc64; box-shadow: inset 0 2px 2px #ffffff66; padding: 11px 7px; color: white; font-size: 17px; font-weight: 700; }
.ref-share-button svg { width: 22px; height: 22px; }
.ref-signed { background: transparent; display: grid; align-items: end; padding: 0 8px 18px; }
.ref-signed-paper { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 14px 11px; background: #fff; border: 1px solid #e1eee2; border-radius: 20px; box-shadow: 0 6px 0 #d6eed0,0 13px 22px #4b943d25; transform: rotate(-3deg); }
.ref-success { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,#78e19a,#00a953); color: #fff; box-shadow: inset 1px 2px 2px #ffffff77; margin: 0 0 12px; }
.ref-success svg { width: 31px; height: 31px; }
.ref-signed-paper > strong { font-size: 16px; text-align: center; }
.ref-signature { width: 100%; height: 65px; fill: none; stroke: #073c30; stroke-width: 2; stroke-linecap: round; }
.ref-signed-paper .ref-signature { margin: 15px 0 10px; border-bottom: 1px solid #cad8d0; height: 67px; background: #fcfefc; }
.ref-signed-paper > small { font-size: 10px; color: #819187; }
.ref-confetti { position: absolute; inset: 18px 0; }
.ref-confetti i { position: absolute; width: 7px; height: 12px; background: #74d287; left: calc(var(--n)*11%); top: calc(mod(var(--n),3)*40%); transform: rotate(calc(var(--n)*43deg)); }

/* A branded document with a real hierarchy, totals and signature. */
.ref-document-stage { min-width: 0; padding: 22px 20px 42px; isolation: isolate; }
.ref-document-back { position: absolute; inset: 35px 35px 55px; border-radius: 35px; transform: rotate(3deg); background: linear-gradient(150deg,#99cfa2,#e7f8e4); z-index: -1; }
.ref-document { padding-bottom: 18px; position: relative; transform: rotate(-3deg); border: 1px solid #e1ece2; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 18px 30px #255b2a21; }
.ref-document-cover { position: relative; height: 186px; }
.ref-document-cover > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 60% 8%; }
.ref-document-brand { position: absolute; top: 0; right: 0; display: flex; gap: 10px; align-items: center; padding: 16px 21px 20px; background: linear-gradient(165deg,#fff 65%,#ffffffc7); border-radius: 0 0 0 50px; font-size: 20px; font-weight: 800; }
.ref-document-brand > svg { width: 34px; height: 34px; }
.ref-document-brand small { display: block; font-size: 10px; font-weight: 400; }
.ref-document-title { position: relative; margin: -38px 23px 0; text-align: right; }
.ref-document-title h3 { font: 800 40px/1.05 Rubik,sans-serif; margin: 0; }
.ref-document-title > strong { display: block; font-size: 21px; line-height: 1.4; }
.ref-document-title > small { display: block; font-size: 12px; color: #698276; margin-top: 7px; }
.ref-document-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 17px 23px; font-size: 11px; color: #70847d; }
.ref-document-meta > span { display: flex; align-items: center; gap: 5px; }
.ref-document-meta svg { width: 16px; height: 16px; color: #214e3f; }
.ref-document-table { margin: 0 20px; border: 1px solid #edf1ed; border-radius: 12px; overflow: hidden; }
.ref-table-head, .ref-table-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 12px; font-size: 13px; }
.ref-table-head { padding-block: 8px; background: #eef6ef; font-size: 12px; font-weight: 700; }
.ref-table-row { border-top: 1px solid #eef3ef; }
.ref-table-row > span:first-child { font-size: 11px; }
.ref-table-row strong { display: block; font-size: 14px; }
.ref-table-row small { display: block; font-size: 10px; color: #7d8a82; }
.ref-table-row > bdi { font-size: 17px; font-weight: 700; white-space: nowrap; }
.ref-document-subtotal { padding: 12px 27px 10px; display: grid; gap: 4px; font-size: 12px; }
.ref-document-subtotal > span { display: flex; justify-content: space-between; }
.ref-document-total { margin: 0 20px; padding: 10px 13px; background: linear-gradient(110deg,#def5dc,#ebf9ec); border-radius: 9px; display: flex; align-items: center; justify-content: space-between; font-size: 19px; }
.ref-document-total > bdi { font: 700 29px Rubik,sans-serif; white-space: nowrap; }
.ref-document-approval { padding: 14px 24px 9px; display: flex; align-items: center; gap: 12px; font-size: 11px; }
.ref-document-approval > span { display: flex; align-items: center; gap: 6px; flex: 1; }
.ref-document-approval > span > svg { width: 22px; height: 22px; color: #08934d; }
.ref-document-approval > div { border: 1px solid #e0e7e2; border-radius: 10px; padding: 5px 12px; width: 48%; text-align: center; }
.ref-document-approval small { font-size: 9px; }
.ref-document-approval .ref-signature { height: 42px; display: block; }
.ref-document-bottom { display: flex; align-items: center; justify-content: space-between; padding-inline: 24px; gap: 8px; }
.ref-document-bottom > span { font-size: 16px; color: #168257; transform: rotate(-5deg); }
.ref-document-bottom > button { background: linear-gradient(120deg,#006043,#003b31); color: #fff; border: 0; border-radius: 30px; padding: 10px 12px; display: flex; align-items: center; gap: 5px; font-size: 11px; box-shadow: 0 4px 8px #093e3924; }
.ref-document-bottom svg { width: 16px; height: 16px; }
.ref-signed-badge { position: absolute; top: 66px; left: 0; display: flex; align-items: center; gap: 10px; border: 1px solid #e1f4e4; padding: 13px 15px; background: #ffffffed; border-radius: 20px; box-shadow: 0 8px 0 #e7f5e1,0 15px 23px #2c85452b; transform: rotate(-6deg); z-index: 2; }
.ref-signed-badge > svg { background: linear-gradient(#21c764,#00802f); color: #fff; padding: 7px; width: 40px; height: 40px; border-radius: 50%; }
.ref-signed-badge strong { display: block; color: #158338; font-size: 16px; }
.ref-signed-badge small { font-size: 10px; }
.ref-mobile-badge { position: absolute; bottom: 160px; left: -9px; display: flex; align-items: center; gap: 6px; border-radius: 15px; padding: 10px; background: #f7fff4e8; box-shadow: 0 12px 22px #19602f20; font-size: 11px; font-weight: 700; transform: rotate(-8deg); }
.ref-mobile-badge > svg { width: 27px; height: 32px; }
.ref-document-stage > .document-caption { position: static; margin: 25px 0 0; font-size: 11px; text-align: center; }

/* Two familiar phone screens: edit the offer, then track its status. */
.ref-control .section-heading { margin-bottom: 42px; }
.ref-control .section-lead { margin-top: 17px; }
.ref-control-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.ref-control-card { display: grid; grid-template-columns: 1fr 1.14fr; align-items: center; gap: 18px; padding: 27px 22px 24px; background: linear-gradient(135deg,#fff,#f8fdf9); border: 1px solid #dfeee4; border-radius: 30px; min-width: 0; box-shadow: 0 18px 28px #39875b09; }
.ref-control-copy h3 { font: 750 27px/1.24 Rubik,sans-serif; margin: 0 0 20px; }
.ref-control-copy > p { color: #648075; font-size: 17px; line-height: 1.65; margin: 0; }
.ref-control-benefits { list-style: none; margin: 29px 0 0; padding: 0; display: grid; gap: 23px; }
.ref-control-benefits > li { display: flex; gap: 10px; align-items: flex-start; }
.ref-control-benefits > li > span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #def3e4; border-radius: 50%; background: linear-gradient(140deg,#f2fcf2,#e0f8e5); flex: 0 0 40px; color: #087841; }
.ref-control-benefits svg { width: 21px; height: 21px; }
.ref-control-benefits strong { display: block; font-size: 14px; }
.ref-control-benefits small { display: block; font-size: 12px; line-height: 1.5; color: #799087; margin-top: 3px; }
.ref-device { position: relative; width: 100%; max-width: 300px; margin: 0 auto; padding: 6px; background: #101c17; border: 2px solid #56625a; border-radius: 40px; box-shadow: 0 0 0 1px #d2d8d1,2px 2px 0 3px #8d958b,0 11px 23px #1b442b25; min-width: 0; }
.ref-device-screen { overflow: hidden; background: #fff; border-radius: 32px; min-height: 510px; display: flex; flex-direction: column; }
.ref-phone-status { display: flex; align-items: center; justify-content: space-between; direction: ltr; padding: 13px 13px 10px; font-size: 10px; line-height: 1; height: 42px; }
.ref-phone-status > span { width: 77px; height: 21px; border-radius: 30px; background: #070d0a; }
.ref-phone-status small { color: #1d3025; font-size: 9px; }
.ref-app-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 12px; gap: 4px; font-size: 11px; }
.ref-app-header strong { text-align: center; font-size: 13px; }
.ref-app-header small { display: block; font-size: 8px; color: #708a7e; font-weight: 400; margin-top: 2px; }
.ref-app-header svg { width: 15px; height: 15px; }
.ref-save-tag { background: #00694c; border-radius: 10px; color: white; padding: 4px 7px; font-size: 8px; }
.ref-app-cover { height: 94px; position: relative; }
.ref-app-cover > img { width: 100%; height: 100%; object-fit: cover; }
.ref-app-cover > span { position: absolute; bottom: 8px; left: 8px; display: flex; align-items: center; gap: 4px; border-radius: 7px; padding: 4px 6px; font-size: 8px; background: #152d23a6; color: #fff; }
.ref-app-cover svg { width: 11px; height: 11px; }
.ref-app-content { padding: 12px 9px 10px; }
.ref-app-customer { display: flex; gap: 7px; align-items: center; font-size: 11px; }
.ref-app-customer svg { width: 19px; height: 19px; }
.ref-app-customer small { display: block; color: #7d9187; font-size: 8px; font-weight: 400; }
.ref-app-field { position: relative; padding: 8px 7px; border: 1px solid #e2eae4; border-radius: 6px; margin: 12px 0; font-size: 9px; }
.ref-app-field small { display: block; color: #668172; font-size: 8px; }
.ref-app-field svg { position: absolute; left: 6px; top: 14px; width: 13px; height: 13px; }
.ref-app-table .ref-mini-labels { font-size: 8px; padding: 6px; }
.ref-app-table .ref-mini-row { font-size: 8px; padding: 9px 4px; }
.ref-app-table .ref-mini-row bdi { font-size: 9px; }
.ref-app-table .ref-mini-row svg { width: 12px; height: 12px; }
.ref-app-table .ref-mini-add { font-size: 9px; margin: 8px 0; }
.ref-app-footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding-top: 4px; }
.ref-app-footer > span { font-size: 8px; color: #108043; font-weight: 700; }
.ref-app-footer bdi { display: block; font-size: 15px; color: #073b2d; }
.ref-app-footer button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 43px; font-family: inherit; font-size: 12px; color: #fff; background: linear-gradient(130deg,#096948,#003f36); border: 0; border-radius: 10px; padding: 8px 11px; }
.ref-app-footer button svg { width: 15px; height: 15px; }
.ref-app-tabs { display: flex; justify-content: space-around; gap: 3px; padding: 8px 6px; font-size: 8px; white-space: nowrap; }
.ref-app-tabs > span { padding: 4px 6px; border-radius: 20px; background: #f1f7f3; color: #70867b; }
.ref-app-tabs > .active { color: #fff; background: #155c48; }
.ref-app-list { display: grid; gap: 7px; padding: 5px 8px; }
.ref-app-quote { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid #f0f3f0; background: #fff; border-radius: 9px; box-shadow: 0 2px 8px #1e5f3110; }
.ref-app-quote img { width: 46px; height: 56px; object-fit: cover; border-radius: 8px; }
.ref-app-quote > div { flex: 1; min-width: 0; }
.ref-app-quote strong { display: block; font-size: 11px; }
.ref-app-quote small { display: block; color: #7d9287; font-size: 8px; margin: 2px 0 6px; }
.ref-app-quote-bottom { display: flex; justify-content: space-between; gap: 3px; align-items: center; }
.ref-app-quote-bottom bdi { font-size: 11px; font-weight: 700; white-space: nowrap; }
.ref-app-quote-bottom .quote-status { min-width: 0; width: auto; padding: 3px 5px; font-size: 7px; border-radius: 6px; }
.ref-app-quote-bottom .sent { color: #2464bc; background: #eef6ff; }
.ref-app-nav { display: flex; justify-content: space-around; background: #f9fcf9; border-top: 1px solid #edf3ee; padding: 9px 6px; margin-top: auto; font-size: 8px; }
.ref-app-nav > span { display: flex; align-items: center; flex-direction: column; gap: 2px; min-width: 38px; }
.ref-app-nav svg { width: 18px; height: 18px; }
.ref-app-nav .active { color: #07953c; }
.ref-phone-notice { display: flex; align-items: center; gap: 9px; position: absolute; z-index: 2; bottom: 68px; left: -9px; right: -9px; padding: 13px 10px; background: #fff; border: 1px solid #dcefe3; border-radius: 13px; box-shadow: 0 7px 20px #124c352b; }
.ref-phone-notice > svg { width: 29px; height: 29px; padding: 5px; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#2ed276,#008451); flex-shrink: 0; }
.ref-phone-notice strong { display: block; font-size: 11px; }
.ref-phone-notice small { display: block; color: #6f887b; font-size: 9px; }
.ref-control-caption { text-align: center; color: #8aa094; font-size: 12px; margin-top: 23px; }

/* Four comparable plans and a compact entry plan, with all five offers retained. */
.ref-pricing .section-heading { margin-bottom: 76px; }
.ref-pricing .section-heading h2 { font-size: clamp(32px,3.6vw,54px); }
.ref-pricing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 21px; align-items: stretch; }
.ref-pricing-grid .price-card { display: flex; flex-direction: column; padding: 44px 14px 14px; position: relative; border: 1px solid #ffffff; border-radius: 28px; background: linear-gradient(135deg,#eff9f5ca,#fbffffdb); box-shadow: 0 13px 29px #20755316,inset 0 2px #fff; overflow: visible; margin: 0; }
.ref-plan-inner { position: relative; flex: 1; display: flex; flex-direction: column; align-items: stretch; background: linear-gradient(135deg,#fff,#f9fefb); border-radius: 24px; padding: 56px 13px 12px; }
.ref-plan-icon { position: absolute; top: -43px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 86px; height: 86px; border: 8px solid #f6fff9; outline: 1px solid #e2f6e7; border-radius: 50%; background: linear-gradient(135deg,#e2f8e7,#bceecd); box-shadow: 0 7px 14px #438d5b12,inset 0 2px #ffffffad; color: #065837; }
.ref-plan-icon svg { width: 35px; height: 35px; stroke-width: 1.8; }
.ref-pricing-grid .plan-heading { text-align: center; margin: 0; min-height: 65px; }
.ref-pricing-grid .plan-heading h3 { font: 750 28px Rubik,sans-serif; margin: 0 0 3px; color: #072b23; }
.ref-pricing-grid .plan-heading p { font-size: 15px; margin: 0; color: #769387; }
.ref-pricing-grid .plan-price { display: flex; align-items: center; flex-direction: column; gap: 0; margin: 9px 0 16px; }
.ref-pricing-grid .plan-price bdi { font: 800 65px/1 Rubik,sans-serif; letter-spacing: -3px; color: #071f1d; }
.ref-pricing-grid .plan-price bdi > span { font-size: 26px; letter-spacing: 0; }
.ref-pricing-grid .plan-price > span { font-size: 14px; color: #254d3e; margin-top: 8px; }
.ref-pricing-grid .plan-quota { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 6px 5px; margin: 0 0 20px; border: 0; border-radius: 17px; background: linear-gradient(110deg,#edf8f2,#dbf9e4); font-size: 13px; white-space: nowrap; }
.ref-pricing-grid .plan-quota > strong { width: auto; font: 750 31px Rubik,sans-serif; color: #087046; }
.ref-pricing-grid .plan-features { margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.ref-pricing-grid .plan-features li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; color: #234637; }
.ref-pricing-grid .plan-features li::before { width: 21px; height: 21px; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg,#d2fadc,#9ae7b8); border: 0; border-radius: 50%; color: #0c6f3a; font-size: 14px; font-weight: 900; content: '✓'; }
.ref-pricing-grid .price-card .button { width: 100%; font-size: 17px; min-height: 53px; gap: 9px; border-radius: 16px; padding: 12px 8px; margin-top: auto; }
.ref-pricing-grid .price-card.featured { border: 2px solid #19c371; background: linear-gradient(130deg,#168257,#004e38); box-shadow: 0 0 0 4px #c8ffdd59,0 16px 30px #008a4530,inset 0 2px #a7ffc6; padding-top: 44px; }
.ref-pricing-grid .price-card.featured::before, .ref-pricing-grid .price-card.featured::after { display: none; }
.ref-pricing-grid .featured .ref-plan-inner { background: linear-gradient(150deg,#edfff0,#fff 40%,#f2fff2); }
.ref-pricing-grid .featured .plan-price bdi { color: #004f34; }
.ref-pricing-grid .featured .button { background: linear-gradient(130deg,#21c576,#007346 48%,#003c2a); border-color: #07ad60; box-shadow: inset 0 2px 2px #c7ffcb90,0 0 0 3px #abf6ca55,0 5px 12px #04723d24; }
.ref-pricing-grid .featured .plan-features li::before { background: #02a84c; color: #fff; }
.ref-plan-ribbon { position: absolute; top: -39px; right: -2px; left: -2px; height: 74px; display: flex; justify-content: center; align-items: flex-start; padding-top: 12px; border: 2px solid #19c371; border-bottom: 0; background: linear-gradient(130deg,#21bd75,#007043 60%,#00542e); color: #fff; border-radius: 28px 28px 0 0; font-size: 15px; font-weight: 700; box-shadow: inset 0 2px 2px #b4faca; }
.ref-starter-plan { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 28px 10px 0; padding: 22px 26px; border: 1px solid #deeee4; border-radius: 20px; background: #ffffffcf; }
.ref-starter-plan strong { display: block; font-size: 19px; }
.ref-starter-plan span { display: block; font-size: 15px; color: #6b8677; margin-top: 3px; }
.ref-starter-plan button { white-space: nowrap; font-size: 16px; }
@media (max-width: 1200px) and (min-width: 901px) {
 .ref-control-card { padding-inline: 18px; gap: 14px; grid-template-columns: 1fr; }
 .ref-control-copy { text-align: center; }
 .ref-control-copy > p { max-width: 330px; margin-inline: auto; }
 .ref-control-benefits { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-block: 23px; }
 .ref-control-benefits > li { flex-direction: column; align-items: center; }
 .ref-control-benefits strong { font-size: 12px; }
 .ref-control-benefits small { font-size: 11px; }
 .ref-control-card .ref-device { max-width: 270px; }
 .ref-pricing-grid { gap: 12px; }
 .ref-pricing-grid .price-card { padding-inline: 8px; }
 .ref-plan-inner { padding-inline: 9px; }
 .ref-pricing-grid .plan-price bdi { font-size: 53px; }
 .ref-pricing-grid .plan-features li { font-size: 11px; gap: 5px; }
 .ref-pricing-grid .plan-quota { font-size: 11px; gap: 4px; }
 .ref-pricing-grid .plan-quota > strong { font-size: 26px; }
 .ref-pricing-grid .price-card .button { font-size: 14px; }
 .ref-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 23px; }
}
@media (max-width: 900px) {
 .ref-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 20px; }
 .ref-control-grid { grid-template-columns: 1fr; }
 .ref-control-card { grid-template-columns: 1fr 1fr; gap: 25px; padding: 30px; }
 .ref-control-copy h3 { font-size: 30px; }
 .ref-control-benefits strong { font-size: 16px; }
 .ref-control-benefits small { font-size: 13px; }
 .ref-control-card .ref-device { max-width: 280px; }
 .ref-pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 66px 20px; }
 .ref-pricing-grid .price-card { padding-inline: 14px; }
 .ref-pricing-grid .plan-features li { font-size: 15px; }
 .ref-pricing-grid .plan-quota { font-size: 15px; }
 .ref-document-stage { width: 100%; max-width: 570px; margin-inline: auto; }
 .ref-document-stage .document-caption { margin-top: 29px; }
}
@media (max-width: 600px) {
 .ref-steps { grid-template-columns: 1fr; gap: 49px; }
 .ref-steps .step { padding: 43px 18px 23px; max-width: 400px; width: 100%; margin-inline: auto; }
 .ref-steps .step > p { min-height: 0; font-size: 18px; }
 .ref-steps .step h3 { font-size: 28px; }
 .ref-step-demo { max-width: 300px; margin-inline: auto; }
 .ref-chat-bubble { font-size: 12px; }
 .ref-attachment { font-size: 11px; }
 .ref-mini-row { font-size: 12px; }
 .ref-mini-row > bdi { font-size: 12px; }
 .ref-document-stage { padding: 32px 9px 20px; }
 .ref-document { border-radius: 20px; transform: rotate(-2deg); }
 .ref-document-back { inset-inline: 16px; }
 .ref-document-cover { height: 153px; }
 .ref-document-brand { font-size: 15px; padding: 12px 13px 16px; gap: 7px; }
 .ref-document-brand > svg { width: 25px; height: 25px; }
 .ref-document-brand small { font-size: 8px; }
 .ref-document-title { margin: -25px 15px 0; }
 .ref-document-title h3 { font-size: 32px; }
 .ref-document-title > strong { font-size: 17px; }
 .ref-document-title > small { font-size: 10px; margin-top: 5px; }
 .ref-document-meta { padding: 14px; font-size: 9px; }
 .ref-document-meta svg { width: 13px; height: 13px; }
 .ref-document-table { margin-inline: 12px; }
 .ref-table-head, .ref-table-row { grid-template-columns: 17px minmax(0,1fr) auto; gap: 5px; padding: 9px 7px; }
 .ref-table-head { font-size: 10px; }
 .ref-table-row strong { font-size: 11px; }
 .ref-table-row small { font-size: 8px; }
 .ref-table-row > bdi { font-size: 13px; }
 .ref-document-subtotal { padding: 11px 18px; font-size: 10px; }
 .ref-document-total { margin-inline: 12px; padding: 10px; font-size: 14px; }
 .ref-document-total > bdi { font-size: 23px; }
 .ref-document-approval { padding: 13px 14px; gap: 8px; font-size: 9px; }
 .ref-document-approval > span > svg { width: 17px; height: 17px; }
 .ref-document-approval small { font-size: 8px; }
 .ref-document-approval .ref-signature { height: 35px; }
 .ref-document-bottom { padding-inline: 12px; gap: 4px; }
 .ref-document-bottom > span { font-size: 11px; }
 .ref-document-bottom > button { font-size: 9px; padding: 9px 7px; min-height: 38px; }
 .ref-signed-badge { top: 62px; left: 0; padding: 8px; border-radius: 13px; gap: 6px; }
 .ref-signed-badge > svg { width: 27px; height: 27px; padding: 5px; }
 .ref-signed-badge strong { font-size: 11px; }
 .ref-signed-badge small { font-size: 8px; }
 .ref-mobile-badge { display: none; }
 .ref-control-card { grid-template-columns: 1fr; gap: 25px; padding: 25px 20px 26px; }
 .ref-control-copy { text-align: center; }
 .ref-control-copy h3 { font-size: 30px; }
 .ref-control-copy > p { font-size: 18px; }
 .ref-control-benefits { text-align: start; margin-top: 25px; gap: 17px; }
 .ref-control-benefits strong { font-size: 16px; }
 .ref-control-benefits small { font-size: 14px; }
 .ref-control-card .ref-device { width: calc(100% - 12px); max-width: 280px; }
 .ref-pricing .section-heading h2 { font-size: 34px; }
 .ref-pricing-grid { grid-template-columns: 1fr; gap: 67px; }
 .ref-pricing-grid .price-card { width: 100%; max-width: 380px; margin-inline: auto; padding-inline: 15px; }
 .ref-plan-inner { padding-inline: 19px; }
 .ref-pricing-grid .plan-price bdi { font-size: 72px; }
 .ref-pricing-grid .plan-quota { font-size: 17px; }
 .ref-pricing-grid .plan-quota > strong { font-size: 34px; }
 .ref-pricing-grid .plan-features li { font-size: 16px; gap: 10px; }
 .ref-pricing-grid .plan-heading p { font-size: 17px; }
 .ref-pricing-grid .price-card .button { font-size: 19px; min-height: 57px; }
 .ref-starter-plan { flex-direction: column; text-align: center; padding: 22px 15px; margin-inline: 0; }
 .ref-starter-plan span { font-size: 16px; }
 .ref-starter-plan button { font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
 .ref-step-demo { transition: transform .2s ease,box-shadow .2s ease; }
 .ref-step-demo:hover { transform: translateY(-3px); }
}
/* Keep the new document broad and its heading on white paper. */
.ref-quote { background: radial-gradient(ellipse at 9% 40%,#e2f8e8 0,transparent 47%),linear-gradient(120deg,#fff,#fbfffc); }
.ref-document-stage { width: 100%; max-width: 570px; }
.ref-document-title { width: 82%; margin: -52px 0 0 auto; padding: 14px 22px 0 4px; background: #fff; border-radius: 65% 0 0 0; }
.ref-step-demo { height: 310px; }
.ref-pricing-grid .price-card.featured { background: linear-gradient(135deg,#eaffef,#f7fff8); }
.ref-pricing-grid .plan-features li { padding: 0; border: 0; font-size: 15px; }
.ref-pricing-grid .plan-features { gap: 15px; margin-bottom: 25px; }
.ref-app-header strong { font-size: 14px; }
.ref-app-quote strong { font-size: 12px; }
.ref-app-quote small { font-size: 9px; }
.ref-app-quote-bottom bdi { font-size: 12px; }
@media (max-width:1200px) and (min-width:901px) {
 .ref-pricing-grid .plan-features li { font-size: 13px; }
}
@media (max-width:600px) {
 .ref-document-title { margin-top: -35px; padding: 13px 15px 0 3px; width: 84%; }
 .ref-pricing-grid .plan-features li { font-size: 16px; }
}
.ref-quote .quote-feature-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 70px; }
.ref-quote .quote-feature-copy { min-width: 0; }
.ref-quote .quote-feature-copy .section-lead { max-width: 100%; }
.ref-quote .quote-feature-copy h2 { font-size: clamp(35px,3.55vw,53px); }
.ref-quote .quote-feature-copy h2::first-line { color: #063e2e; }
.ref-how, .ref-quote, .ref-control, .ref-pricing { padding-block: 85px; }
.ref-how .section-heading { margin-bottom: 70px; }
@media(max-width:900px) { .ref-quote .quote-feature-grid { grid-template-columns: 1fr; gap: 35px; } }
@media(max-width:600px) {
 .ref-how, .ref-quote, .ref-control, .ref-pricing { padding-block: 65px; }
 .ref-quote .quote-feature-copy h2 { font-size: 36px; }
}
.ref-pricing-grid .plan-features li::before { position: static; inset: auto; transform: none; }

/* Focused landing review: just the requested demo and plan actions. */
button:disabled, a[aria-disabled="true"] { cursor: default; opacity: 1; }
a[aria-disabled="true"] { pointer-events: none; }
button:disabled, button:disabled * { pointer-events: none; }
.hero-actions.cta-stack, .cta-stack.repeated-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(100%,370px); }
.hero-actions.cta-stack .button, .repeated-actions .button { width: 100%; min-height: 56px; padding: 13px 17px; border-radius: 16px; font-size: 18px; justify-content: center; }
.hero-actions.cta-stack .button-outline, .repeated-actions .button-outline { color: #087344; background: #fff; border: 1px solid #b6d9c4; box-shadow: none; }
.ref-how .how-footer { display: flex; flex-direction: column; align-items: center; gap: 25px; }
.repeated-actions { margin-inline: auto; }
#pricing { scroll-margin-top: 110px; }
#pricing:focus { outline: none; }
.focused-final-cta { background: radial-gradient(ellipse at 50% 65%,#def8e5,transparent 70%),#fbfffc; padding: 70px 0 90px; text-align: center; border-top: 1px solid #e4f2e8; }
.focused-final-cta h2 { max-width: 690px; margin: 0 auto 27px; font: 650 clamp(25px,2.9vw,36px)/1.5 Rubik,Heebo,sans-serif; }
.focused-final-cta .button { min-height: 58px; font-size: 18px; padding: 14px 23px; max-width: 100%; margin-inline: auto; }
@media(max-width:900px) { .hero-actions.cta-stack { margin-inline: auto; } }
@media(max-width:600px) {
 .hero-actions.cta-stack .button, .repeated-actions .button { font-size: 16px; padding-inline: 11px; min-height: 54px; }
 .focused-final-cta { padding: 48px 0 60px; }
 .focused-final-cta h2 { font-size: 25px; line-height: 1.5; }
 .focused-final-cta .button { width: 100%; font-size: 16px; padding-inline: 10px; gap: 7px; }
 #pricing { scroll-margin-top: 92px; }
 body { padding-bottom: 0; }
}
/* Mobile visual audit: recompose and tighten native UI, without scaling text. */
@media (max-width:600px) {
  .hero-visual { height: 670px; max-width: 350px; margin-top: 8px; }
  .hero-visual .hero-phone { width: 274px; max-width: calc(100% - 37px); right: 23px; top: 12px; }
  .hero-visual .phone-status { min-height: 35px; padding: 11px 16px 6px; }
  .hero-visual .hero-phone::before { width: 72px; height: 19px; }
  .hero-visual .chat-header { padding: 8px 10px; line-height: 1.35; }
  .hero-visual .chat-header img { width: 32px; height: 32px; }
  .hero-visual .chat-header strong { font-size: 15px; }
  .hero-visual .chat-surface { padding: 10px; gap: 8px; line-height: 1.35; }
  .hero-visual .day-label { padding-block: 3px; }
  .hero-visual .voice-message { padding: 9px 10px 19px; }
  .hero-visual .message { font-size: 14px; line-height: 1.7; padding: 10px 10px 6px; }
  .hero-visual .message small { margin-top: 3px; }
  .hero-visual .chat-create { min-height: 40px; padding: 8px; }
  .hero-visual .chat-compose { padding: 8px 10px 11px; line-height: 1.35; }
  .hero-visual .chat-compose > span:nth-child(2) { padding-block: 5px; }
  .hero-visual .hero-quote-artwork { top: 355px; width: 240px; left: 7px; }
  .hero-visual .orbit-one { top: 125px; width: 315px; height: 315px; }
  .hero-visual .orbit-two { top: 402px; width: 215px; height: 215px; }
  .hero-visual .illustration-label { left: 10px; bottom: 0; }
  .profession-list { gap: 10px; }
  .profession-list > span { min-height: 104px; padding: 15px 7px; gap: 10px; }
  .profession-list svg { width: 43px; height: 43px; padding: 9px; }
  .ref-document-stage { max-width: 350px; padding: 24px 16px 16px; }
  .ref-document { line-height: 1.35; transform: rotate(-1.5deg); padding-bottom: 14px; }
  .ref-document-cover { height: 112px; }
  .ref-document-brand { padding: 10px 12px 12px; }
  .ref-document-title { margin-top: -22px; padding: 10px 12px 0 3px; }
  .ref-document-title h3 { font-size: 29px; line-height: 1.1; }
  .ref-document-title > strong { font-size: 16px; line-height: 1.3; }
  .ref-document-meta { padding: 10px 12px; }
  .ref-table-head, .ref-table-row { padding: 8px 7px; line-height: 1.35; }
  .ref-table-row strong { font-size: 12px; line-height: 1.4; }
  .ref-table-row small { font-size: 9px; line-height: 1.4; }
  .ref-document-subtotal { padding: 8px 16px; }
  .ref-document-total { padding: 9px; }
  .ref-document-approval { padding: 10px 12px; line-height: 1.35; }
  .ref-document-bottom { line-height: 1.35; }
  .ref-document-stage .document-caption { margin-top: 23px; }
  .ref-signed-badge { top: 46px; left: 1px; }
  .ref-control-card { padding: 25px 20px 29px; gap: 24px; }
  .ref-control-card .ref-device { width: calc(100% - 12px); max-width: 262px; border-radius: 36px; }
  .ref-device-screen { min-height: 0; border-radius: 28px; line-height: 1.35; }
  .ref-phone-status { height: 34px; padding-block: 9px 8px; }
  .ref-phone-status > span { height: 18px; width: 68px; }
  .ref-app-header { padding-block: 7px 9px; line-height: 1.35; }
  .ref-app-cover { height: 72px; }
  .ref-app-content { padding: 10px 9px; }
  .ref-app-field { margin-block: 9px; padding-block: 6px; }
  .ref-app-table .ref-mini-row { padding-block: 7px; }
  .ref-app-table .ref-mini-add { margin-block: 6px; }
  .ref-app-footer button { min-height: 39px; }
  .ref-app-list { gap: 6px; }
  .ref-app-quote { padding: 7px; }
  .ref-app-quote img { height: 50px; width: 43px; }
  .ref-phone-notice { padding: 10px; bottom: 59px; left: -6px; right: -6px; line-height: 1.35; }
  .setup-steps { gap: 12px; }
  .setup-steps li { padding: 19px 17px; gap: 15px; }
  .setup-steps li > span { width: 48px; height: 48px; flex-basis: 48px; }
  .setup-steps li > span svg { width: 24px; height: 24px; }
  .setup-steps strong { font-size: 21px; line-height: 1.3; }
  .setup-steps p { font-size: 15px; line-height: 1.55; margin-top: 6px; }
}
@media (max-width:360px) {
  .hero-visual { height: 675px; }
  .hero-visual .hero-phone { width: 251px; max-width: calc(100% - 36px); right: 20px; }
  .hero-visual .hero-quote-artwork { top: 366px; width: 235px; left: 8px; }
  .ref-document-stage { padding-inline: 14px; }
}
/* Fit each illustration in a phone viewport while retaining its actual UI. */
@media (max-width:600px) {
 .hero-visual { height: 626px; }
 .hero-visual .hero-phone { width: 266px; top: 10px; }
 .hero-visual .chat-header { padding: 7px 9px; }
 .hero-visual .chat-header strong { font-size: 14px; }
 .hero-visual .chat-header img { width: 30px; height: 30px; }
 .hero-visual .chat-surface { padding: 9px; gap: 7px; }
 .hero-visual .voice-message { padding: 8px 9px 17px; }
 .hero-visual .voice-play { width: 27px; height: 27px; flex-basis: 27px; }
 .hero-visual .message { font-size: 13px; line-height: 1.55; padding: 9px 9px 5px; }
 .hero-visual .chat-create { min-height: 36px; padding: 7px; font-size: 14px; }
 .hero-visual .chat-compose { padding: 7px 9px 9px; }
 .hero-visual .hero-quote-artwork { top: 318px; width: 235px; }
 .hero-visual .orbit-one { width: 295px; height: 295px; top: 100px; }
 .hero-visual .orbit-two { top: 355px; width: 205px; height: 205px; }
 .ref-document-stage { padding: 14px 16px 10px; }
 .ref-document { padding-bottom: 10px; }
 .ref-document-cover { height: 86px; }
 .ref-document-brand { padding-block: 8px 10px; font-size: 14px; }
 .ref-document-brand small { font-size: 8px; }
 .ref-document-title { padding-top: 8px; margin-top: -18px; }
 .ref-document-title h3 { font-size: 27px; }
 .ref-document-title > small { margin-top: 3px; }
 .ref-document-meta { padding-block: 7px; }
 .ref-table-head, .ref-table-row { padding-block: 6px; }
 .ref-document-subtotal { padding-block: 6px; }
 .ref-document-total { padding-block: 8px; }
 .ref-document-approval { padding-block: 8px; }
 .ref-document-approval .ref-signature { height: 29px; }
 .ref-document-bottom > button { min-height: 31px; padding-block: 7px; }
 .ref-document-stage .document-caption { margin-top: 16px; }
 .ref-signed-badge { top: 28px; }
}
@media(max-width:360px) {
 .hero-visual { height: 616px; }
 .hero-visual .hero-phone { width: 247px; }
 .hero-visual .hero-quote-artwork { top: 314px; width: 231px; }
 .ref-document-stage { padding-inline: 14px; }
}
@media(max-width:600px) {
 /* Small UI labels gain clarity; savings come from spacing, not smaller text. */
 .ref-app-table .ref-mini-labels { font-size: 9px; }
 .ref-app-table .ref-mini-row { font-size: 10px; line-height: 1.4; padding-block: 6px; }
 .ref-app-table .ref-mini-row bdi { font-size: 11px; }
 .ref-app-customer { font-size: 12px; }
 .ref-app-field { font-size: 10px; }
 .ref-app-footer bdi { font-size: 17px; }
}

/* Focused revision: real, passive product previews; no new interactions. */
.ref-how .section-heading { margin-bottom: 76px; }
.ref-how .section-heading .section-lead { margin-top: 22px; }
.ref-how .section-heading > .pen-arrow { width: 56px; height: 82px; stroke-width: 1.2; }
.focused-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-top: 0; align-items: stretch; }
.focused-steps .fs-step { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 53px 15px 20px; text-align: center; border: 1px solid #dfede7; border-radius: 27px; background: linear-gradient(156deg,#ffffff 67%,#f5fcf7); box-shadow: 0 13px 35px #216b3710,inset 0 1px #fff; }
.fs-number { position: absolute; top: -31px; left: calc(50% - 31px); display: grid; place-items: center; width: 62px; height: 62px; border: 6px solid #edf8ef; border-radius: 50%; background: linear-gradient(135deg,#e9f6dd,#d2efd7); outline: 1px solid #e6f3e8; box-shadow: inset 0 2px 6px #ffffffed,0 3px 9px #5e9d5c08; color: #053e2e; font: 700 25px/1 Rubik,Heebo,sans-serif; letter-spacing: 1px; }
.focused-steps h3 { font: 750 25px/1.3 Rubik,Heebo,sans-serif; color: #073f30; letter-spacing: -.8px; margin: 3px 0 12px; }
.focused-steps .fs-step > p { font: 400 16px/1.65 Heebo,sans-serif; color: #617787; margin: 0 0 22px; min-height: 53px; }
.fs-visual { width: 100%; max-width: 300px; height: 286px; flex-shrink: 0; margin: auto auto 0; position: relative; text-align: start; color: #143e35; }
.fs-visual svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; flex-shrink: 0; }
.fs-chat { overflow: hidden; border: 1px solid #e0e9df; border-radius: 15px; background: #f5f6ee; box-shadow: 0 5px 8px #2343290b; }
.fs-chat-header { display: flex; align-items: center; gap: 7px; height: 47px; padding: 6px 10px; background: linear-gradient(120deg,#388d7d,#257663); color: #fff; }
.fs-chat-header > svg { width: 17px; }
.fs-avatar { display: grid; place-items: center; width: 30px; height: 30px; background: linear-gradient(135deg,#f8fbfa,#d6e3e0); border-radius: 50%; color: #fff; overflow: hidden; }
.fs-avatar svg { width: 29px; height: 29px; fill: currentColor; stroke: none; transform: translateY(4px); }
.fs-chat-header strong { font-size: 13px; line-height: 1.3; flex: 1; }
.fs-chat-header small { display: block; font-size: 9px; font-weight: 400; color: #ddf1e9; margin-top: 2px; }
.fs-chat-menu { font-size: 21px; }
.fs-chat-body { display: flex; flex-direction: column; align-items: flex-start; padding: 10px; gap: 7px; height: calc(100% - 47px); background: radial-gradient(#76ac7c14 1px,transparent 1px) 0 0/13px 13px; }
.fs-message { position: relative; max-width: 96%; border: 1px solid #e0edcf; padding: 7px 9px 5px; border-radius: 10px 2px 10px 10px; background: linear-gradient(125deg,#f1ffe4,#e5f9d8); box-shadow: 0 2px 3px #40513a0d; font: 400 11px/1.45 Heebo,sans-serif; }
.fs-time { display: block; direction: ltr; text-align: left; color: #8da294; font-size: 9px; line-height: 1.3; margin-top: 2px; }
.fs-time i { font: normal 600 10px Arial,sans-serif; letter-spacing: -2px; color: #45adce; margin-left: 3px; }
.fs-audio { width: 96%; display: flex; align-items: center; gap: 8px; height: 51px; direction: ltr; padding: 7px 9px 13px; }
.fs-play { width: 31px; height: 31px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#51d884,#00a656); box-shadow: inset 0 1px 2px #ffffff8a; }
.fs-play svg { width: 17px; height: 17px; fill: currentColor; stroke: none; transform: translateX(1px); }
.fs-audio-track { flex: 1; min-width: 0; height: 32px; position: relative; }
.fs-audio-track .fs-wave { display: block; width: 100%; height: 24px; color: #30b869; stroke-width: 2.2; stroke-linecap: round; }
.fs-audio-track small { display: block; font-size: 8px; line-height: 1; margin-top: 2px; color: #799881; }
.fs-audio > .fs-time { position: absolute; bottom: 3px; right: 8px; }
.fs-attachment { width: 96%; display: flex; gap: 7px; align-items: center; border: 1px solid #e9ede7; border-radius: 10px; background: #fff; padding: 5px; box-shadow: 0 2px 5px #30452f0b; }
.fs-attachment img { width: 56px; height: 36px; object-fit: cover; border-radius: 6px; }
.fs-attachment strong { display: block; font-size: 10px; font-weight: 600; }
.fs-attachment small { display: block; font-size: 9px; color: #8b9a94; }
.fs-attachment > svg { margin-inline-start: auto; width: 15px; color: #8cac9c; }
.fs-done { align-self: flex-end; display: flex; align-items: center; gap: 6px; min-width: 118px; height: 29px; font-size: 12px; padding: 4px 8px; }
.fs-done > span:not(.fs-time) { display: grid; place-items: center; width: 17px; height: 17px; background: #14ad61; border-radius: 50%; color: white; }
.fs-done svg { width: 13px; height: 13px; stroke-width: 2.4; }
.fs-done .fs-time { font-size: 8px; margin-inline-start: auto; }
.fs-editor { display: flex; flex-direction: column; border: 1px solid #e1ede4; border-radius: 17px; padding: 13px 9px 11px; background: #fff; box-shadow: -2px 5px 0 #e9f6e5,0 11px 17px #49994619; }
.fs-editor-title { display: flex; align-items: center; gap: 6px; padding-inline: 2px; }
.fs-editor-title strong { flex: 1; font-size: 14px; }
.fs-edit-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #edf8ee; }
.fs-edit-icon svg { width: 17px; }
.fs-editor-title > img { opacity: .6; width: 27px; height: 27px; }
.fs-editor-client { display: flex; justify-content: space-between; gap: 4px; font-size: 10px; color: #718779; margin: 8px 2px 11px; }
.fs-editor-client small { font-size: inherit; }
.fs-editor-table { width: 100%; }
.fs-table-head, .fs-table-line { display: grid; grid-template-columns: minmax(0,1fr) 23px 44px 53px; gap: 4px; align-items: center; text-align: center; font: 400 11px/1.25 Heebo,sans-serif; padding: 8px 4px; }
.fs-table-head { color: #72828b; background: #f1f4f4; border-radius: 6px; padding-block: 7px; font-size: 9px; }
.fs-table-head > :first-child, .fs-table-line > :first-child { text-align: start; }
.fs-table-line { min-height: 35px; border-bottom: 1px solid #edf1ed; }
.fs-table-line strong { display: flex; align-items: center; justify-content: space-between; gap: 2px; font-size: 11px; font-weight: 500; }
.fs-table-line bdi { white-space: nowrap; font-size: 10px; font-variant-numeric: tabular-nums; }
.fs-table-line svg { width: 12px; height: 12px; color: #289c55; }
.fs-line-active { border: 1px solid #72d798; border-radius: 6px; background: #fcfffc; margin-top: 2px; box-shadow: 0 1px 3px #32a6570b; padding-block: 5px; }
.fs-cell { display: block; border: 1px solid #eef2ee; background: #fff; padding: 5px 0; border-radius: 3px; }
.fs-price-cell { display: flex; align-items: center; justify-content: center; gap: 1px; height: 23px; background: #fff; border: 1px solid #78bef5; border-radius: 3px; outline: 2px solid #e8f5ff; }
.fs-caret { display: inline-block; height: 11px; width: 1px; background: #263d48; }
.fs-add-line { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #369961; padding: 8px 3px 10px; }
.fs-add-line > span { display: grid; place-items: center; background: #4fc883; border-radius: 50%; color: #fff; font-size: 15px; width: 14px; height: 14px; line-height: 1; }
.fs-editor-total { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 8px; background: linear-gradient(120deg,#ecfaed,#ddf6e2); border-radius: 8px; font-size: 11px; font-weight: 700; }
.fs-editor-total bdi { font: 700 21px/1 Rubik,Heebo,sans-serif; white-space: nowrap; letter-spacing: -.8px; }
.fs-share { padding: 0 10px 5px; }
.fs-document { position: relative; display: flex; flex-direction: column; height: 100%; padding: 16px 13px 12px; border: 1px solid #e0ece4; border-radius: 18px 5px 18px 18px; background: #fff; box-shadow: -2px 5px 0 #e0f0db,0 13px 21px #4c91471c; }
.fs-fold { position: absolute; top: -1px; right: -1px; width: 29px; height: 29px; background: linear-gradient(225deg,#f8fdf9 48%,#deece1 49%,#fff 55%); border-bottom: 1px solid #e3eee6; border-left: 1px solid #e3eee6; border-bottom-left-radius: 5px; }
.fs-document-brand { display: flex; align-items: center; gap: 6px; padding-inline-start: 3px; }
.fs-document-brand > img { width: 26px; height: 26px; opacity: .55; }
.fs-document-brand > span:not(.fs-pdf) { flex: 1; font-size: 10px; font-weight: 650; line-height: 1.3; }
.fs-document-brand small { display: block; font-size: 8px; color: #a0aba5; font-weight: 400; margin-top: 2px; }
.fs-pdf { display: grid; place-items: center; width: 28px; height: 34px; color: #fff; background: linear-gradient(140deg,#ff5951,#eb261c); box-shadow: 0 3px 5px #ee443c22; border-radius: 4px; font: 700 10px Arial,sans-serif; }
.fs-document h4 { font: 750 21px/1.2 Rubik,Heebo,sans-serif; letter-spacing: -.6px; margin: 15px 0 5px; }
.fs-document > p { margin: 0 0 9px; color: #839588; font-size: 9px; }
.fs-document-lines { border-top: 1px solid #e7eee8; }
.fs-document-lines > span { display: flex; justify-content: space-between; gap: 3px; padding: 6px 1px; border-bottom: 1px solid #eef2ee; color: #72877a; font-size: 10px; line-height: 1.2; }
.fs-document-lines bdi { color: #5e776a; font-size: 10px; }
.fs-document-sum { display: flex; justify-content: space-between; gap: 5px; margin: 9px 0 12px; color: #426854; font-size: 10px; }
.fs-document-sum bdi { font-weight: 700; font-size: 12px; }
.fs-send-action { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 5px; background: linear-gradient(135deg,#2ed280,#00a350); color: #fff; border: 1px solid #10b760; border-radius: 12px; padding: 10px 9px; box-shadow: inset 0 2px 2px #ffffff55,0 4px 7px #12ae6320; }
.fs-send-action strong { font-size: 16px; line-height: 1.25; white-space: nowrap; }
.fs-send-action svg { width: 23px; height: 23px; stroke-width: 1.7; }
.fs-signed { display: flex; align-items: flex-end; justify-content: center; padding: 0 12px 15px; }
.fs-signed-document { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 16px 11px 15px; border: 1px solid #e3ede4; border-radius: 19px; background: linear-gradient(150deg,#fff,#fefffd); box-shadow: 0 6px 0 #d7efcf,0 13px 25px #55934a21; transform: rotate(-3deg); z-index: 1; }
.fs-success { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: linear-gradient(135deg,#70d994,#09a956); box-shadow: inset 0 2px 3px #ffffff80,0 4px 8px #189d5b18; border-radius: 50%; margin-top: -3px; }
.fs-success svg { width: 31px; height: 31px; stroke-width: 2.5; }
.fs-signed-document h4 { font: 650 16px/1.3 Heebo,sans-serif; margin: 11px 0 12px; letter-spacing: -.4px; white-space: nowrap; }
.fs-signature-box { width: 100%; border: 1px solid #f0f3ee; border-radius: 11px; padding: 7px 11px; background: #fff; box-shadow: 0 2px 8px #72867a0c; }
.fs-signature-box > span:first-child { color: #87998b; font-size: 8px; }
.fs-signature-box .fs-signature { display: block; width: 100%; height: 64px; color: #09392e; stroke-width: 1.8; stroke-linecap: round; }
.fs-signature-rule { display: block; height: 1px; background: #cbd8ce; margin: 0 0 5px; }
.fs-signed-document > small { display: flex; align-items: center; gap: 4px; margin-top: 10px; color: #87998b; font-size: 9px; }
.fs-signed-document > small svg { width: 12px; height: 12px; color: #63a377; }
.fs-confetti { position: absolute; inset: 0; pointer-events: none; }
.fs-confetti i { position: absolute; display: block; width: 6px; height: 10px; background: #28b26c; border-radius: 1px; transform: rotate(-25deg); }
.fs-confetti i:nth-child(1) { top: 17%; left: 3%; }
.fs-confetti i:nth-child(2) { top: 7%; left: 14%; background: #94d557; transform: rotate(-31deg); }
.fs-confetti i:nth-child(3) { top: 11%; left: 33%; width: 5px; height: 7px; background: #a4df66; transform: rotate(30deg); }
.fs-confetti i:nth-child(4) { top: 14%; right: 4%; background: #008f4a; transform: rotate(21deg); }
.fs-confetti i:nth-child(5) { top: 5%; right: 24%; width: 5px; background: #8cddac; transform: rotate(-24deg); }
.fs-confetti i:nth-child(6) { top: 34%; left: 0; background: #83d993; transform: rotate(39deg); }
.fs-confetti i:nth-child(7) { top: 51%; right: 1%; background: #87dba1; transform: rotate(-21deg); }
.fs-confetti i:nth-child(8) { top: 38%; right: 0; height: 13px; background: #81d2aa; transform: rotate(29deg); }
.fs-confetti i:nth-child(9) { top: 65%; left: 4%; width: 5px; height: 8px; background: #b6e98c; transform: rotate(9deg); }
.fs-confetti i:nth-child(10) { top: 74%; right: 6%; width: 5px; background: #c9edc9; transform: rotate(-30deg); }
.fs-confetti i:nth-child(11) { top: 24%; right: 19%; width: 4px; height: 6px; background: #a6e29e; transform: rotate(36deg); }
.fs-confetti i:nth-child(12) { top: 24%; left: 24%; width: 5px; height: 7px; background: #6cd897; transform: rotate(54deg); }
@media (min-width: 1101px) and (max-width: 1279px) {
  .focused-steps { gap: 13px; }
  .focused-steps .fs-step { padding-inline: 11px; }
  .focused-steps h3 { font-size: 23px; }
  .focused-steps .fs-step > p { font-size: 14px; }
  .fs-share { padding-inline: 3px; }
  .fs-signed { padding-inline: 9px; }
  .fs-editor-title strong { font-size: 12px; }
  .fs-table-head, .fs-table-line { grid-template-columns: minmax(0,1fr) 18px 37px 48px; gap: 2px; }
  .fs-table-line strong { font-size: 9px; }
  .fs-table-line svg { display: none; }
  .fs-editor-total { padding-inline: 6px; font-size: 10px; }
  .fs-editor-total bdi { font-size: 18px; }
  .fs-signed-document h4 { font-size: 14px; }
}
@media (max-width: 1100px) {
  .focused-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 63px 24px; max-width: 800px; margin-inline: auto; }
  .focused-steps .fs-step { padding: 53px 20px 23px; }
  .fs-visual { max-width: 300px; }
}
@media (max-width: 640px) {
  .ref-how .section-heading { margin-bottom: 68px; }
  .ref-how .section-heading .section-lead { font-size: 17px; line-height: 1.65; max-width: 300px; margin: 17px auto 0; }
  .focused-steps { grid-template-columns: 1fr; gap: 61px; max-width: 384px; }
  .focused-steps .fs-step { padding: 49px 20px 21px; border-radius: 25px; }
  .focused-steps h3 { font-size: 26px; margin-top: 2px; margin-bottom: 9px; }
  .focused-steps .fs-step > p { font-size: 16px; line-height: 1.6; min-height: 0; margin-bottom: 23px; }
  .fs-visual { height: 286px; }
  .fs-number { width: 58px; height: 58px; top: -29px; left: calc(50% - 29px); font-size: 24px; }
}
@media (max-width: 359px) {
  .focused-steps .fs-step { padding-inline: 13px; }
  .focused-steps .fs-step > p { font-size: 15px; }
  .fs-editor-title strong { font-size: 13px; }
  .fs-table-head, .fs-table-line { grid-template-columns: minmax(0,1fr) 21px 41px 50px; gap: 3px; }
  .fs-table-line strong { font-size: 9px; }
  .fs-table-line strong svg { display: none; }
  .fs-share { padding-inline: 4px; }
  .fs-signed { padding-inline: 9px; }
  .fs-signed-document h4 { font-size: 15px; }
}

/* Per-quote monthly package comparison. */
.ref-pricing .plan-unit-cost { margin: 8px 0 0; color: #276451; font-size: 16px; line-height: 1.55; text-align: center; }
.ref-pricing .plan-unit-cost bdi { font-weight: 750; }
.ref-pricing .plan-unit-note { margin: 25px auto 0; color: #637b73; font-size: 15px; line-height: 1.6; text-align: center; }

/* TEMPORARY_PILOT_1_ILS_START: remove with the pilot-entry HTML block. */
.pilot-entry { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto 52px; padding: 24px 20px; max-width: 640px; border: 1px solid #c8e8d8; border-radius: 22px; background: #effaf3; text-align: center; }
.pilot-entry .button { min-height: 52px; padding: 14px 28px; font-size: 19px; }
.pilot-entry p { margin: 0; color: #365e4f; font-size: 14px; line-height: 1.7; }
@media (max-width: 600px) { .pilot-entry { padding: 20px 16px; margin-bottom: 62px; } .pilot-entry .button { width: 100%; } }
/* TEMPORARY_PILOT_1_ILS_END */

/* Give each offer enough width to read the details before purchase. */
.ref-pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 66px 24px; }
.ref-pricing-grid .price-card { width: 100%; max-width: 480px; justify-self: center; padding-inline: 15px; }
.ref-pricing-grid .price-card .plan-features li { font-size: 16px; }
.ref-pricing-grid .price-card .plan-quota { font-size: 16px; }
.ref-pricing-grid .price-card .button { font-size: 18px; }
.ref-pricing-grid .price-card.trial-card { border-color: #8ed6ae; background: linear-gradient(145deg,#dff7e8,#f4fff7); box-shadow: 0 13px 29px #20755322,inset 0 2px #fff; }
.ref-pricing-grid .trial-card { grid-column: 1 / -1; }
.ref-pricing-grid .trial-card .ref-plan-inner { background: linear-gradient(145deg,#fff,#effdf3); }
.ref-pricing-grid .trial-card .plan-price bdi { color: #006a3d; }
.ref-pricing-grid .trial-card .plan-annual-note { color: #1f6944; text-align: center; font-weight: 700; }
.ref-pricing-grid .trial-card .button { background: #087a4b; border-color: #087a4b; color: #fff; }
.ref-pricing-grid .trial-card .trial-eligibility { margin: 12px 2px 0; color: #406454; font-size: 12px; line-height: 1.45; text-align: center; }
@media (max-width: 600px) {
  .ref-pricing-grid { grid-template-columns: 1fr; }
  .ref-pricing-grid .trial-card { grid-column: auto; }
  .ref-pricing-grid .price-card { max-width: 380px; }
}