:root {
      --ink: #172033;
      --muted: #667085;
      --paper: #f5f9ff;
      --card: #fff;
      --green: #2563eb;
      --green-dark: #172554;
      --lime: #facc15;
      --sky: #7dd3fc;
      --soft: #eaf2ff;
      --line: #dfe7f2;
      --message-bg: #dceaff;
      --shadow: 0 16px 50px rgba(37, 99, 235, .13);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: #d7dde5;
      color: var(--ink);
      font: 16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    button, input { font: inherit; }
    button { color: inherit; }

    .app {
      width: min(100%, 520px);
      min-height: 100dvh;
      margin: 0 auto;
      background: var(--paper);
      box-shadow: 0 0 60px rgba(0, 0, 0, .12);
      position: relative;
      overflow-x: hidden;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px 12px;
    }

    .brand {
      display: flex;
      align-items: center;
      font-weight: 850;
      letter-spacing: -.04em;
    }

    .brand-logo { display: block; width: 112px; height: auto; }

    .header-chat {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 42px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--card);
      color: var(--green);
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }

    .header-chat-dot {
      display: block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 0 3px rgba(250, 204, 21, .2);
    }

    .header-chat:hover,
    .header-chat:focus-visible {
      border-color: var(--green);
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

    @media (max-width: 350px) {
      .header-chat-detail { display: none; }
    }

    main { padding-bottom: 112px; }

    .page {
      display: none;
      padding: 10px 20px 30px;
      animation: appear .25s ease;
    }

    .page.active { display: block; }

    @keyframes appear {
      from { opacity: 0; transform: translateY(7px); }
      to { opacity: 1; transform: translateY(0); }
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      margin: 18px 0 14px;
      max-width: 430px;
      font-size: clamp(38px, 10vw, 58px);
      line-height: .96;
      letter-spacing: -.065em;
    }

    h2 {
      margin: 20px 0 14px;
      font-size: 30px;
      line-height: 1.05;
      letter-spacing: -.045em;
    }

    .lead {
      max-width: 410px;
      color: #4d5550;
      font-size: 17px;
    }

    .eyebrow {
      color: var(--lime);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .primary {
      position: relative;
      z-index: 1;
      border: 0;
      border-radius: 14px;
      padding: 13px 17px;
      background: var(--lime);
      color: #183025;
      font-weight: 850;
      cursor: pointer;
    }

    .home-hero {
      padding: 22px;
      border-radius: 26px;
      background: var(--green);
      color: white;
      box-shadow: var(--shadow);
    }

    .home-hero h1 {
      margin: 14px 0 12px;
      color: white;
      font-size: clamp(38px, 10vw, 52px);
    }

    .home-hero .lead {
      margin-bottom: 18px;
      color: rgba(255, 255, 255, .82);
      font-size: 16px;
      line-height: 1.48;
    }

    .home-actions {
      display: grid;
      gap: 9px;
    }

    .home-actions button,
    .home-start button {
      min-height: 48px;
    }

    .home-secondary {
      border: 1px solid rgba(255, 255, 255, .45);
      border-radius: 14px;
      background: transparent;
      color: white;
      font-weight: 850;
      cursor: pointer;
    }

    .home-actions button:focus-visible,
    .home-start button:focus-visible {
      outline: 3px solid white;
      outline-offset: 2px;
    }

    .home-availability {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 14px 0 0;
      color: rgba(255, 255, 255, .82);
      font-size: 12px;
    }

    .home-availability span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 0 4px rgba(250, 204, 21, .16);
    }

    .home-benefits {
      display: grid;
      gap: 9px;
      margin: 14px 0 28px;
    }

    .home-benefits article {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--card);
    }

    .home-benefits article > span {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--lime);
      color: var(--green-dark);
    }

    .home-benefits svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .home-benefits strong,
    .home-benefits small {
      display: block;
    }

    .home-benefits strong {
      font-size: 14px;
    }

    .home-benefits small {
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
    }

    .home-process {
      margin-bottom: 22px;
    }

    .home-process > .eyebrow {
      color: var(--green);
    }

    .home-process h2 {
      margin: 6px 0 15px;
      font-size: 27px;
    }

    .home-process ol {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .home-process li {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 11px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--card);
    }

    .home-process li > span {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--soft);
      color: var(--green);
      font-weight: 900;
    }

    .home-process li strong {
      display: block;
      margin-top: 2px;
      font-size: 14px;
    }

    .home-process li p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .home-start {
      display: grid;
      gap: 16px;
      padding: 20px;
      border-radius: 22px;
      background: var(--green-dark);
      color: white;
    }

    .home-start .eyebrow {
      color: var(--lime);
    }

    .home-start h2 {
      margin: 7px 0 6px;
      font-size: 26px;
    }

    .home-start p {
      margin: 0;
      color: rgba(255, 255, 255, .75);
      font-size: 13px;
      line-height: 1.45;
    }

    .cards { display: grid; gap: 11px; }

    .service {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) auto;
      align-items: center;
      gap: 13px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--card);
    }

    .service-icon {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 17px;
      background: var(--soft);
      color: var(--green);
      font-size: 24px;
      font-weight: 900;
    }

    .service h3 { margin: 0 0 2px; font-size: 16px; }
    .service p { margin: 0; color: var(--muted); font-size: 13px; }
    .service strong { white-space: nowrap; font-size: 14px; }

    .service-copy { min-width: 0; }

    .service-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 9px;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
    }

    .service-price {
      padding: 3px 7px;
      border-radius: 7px;
      background: var(--green);
      color: white;
      font-weight: 850;
    }

    .service {
      width: 100%;
      color: inherit;
      text-align: left;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    button.service { appearance: none; }

    .service:hover {
      border-color: color-mix(in srgb, var(--green) 35%, var(--line));
      box-shadow: 0 9px 24px rgba(37, 99, 235, .09);
      transform: translateY(-1px);
    }

    .service-arrow {
      color: var(--green);
      font-size: 21px;
      font-weight: 500;
    }

    .catalog-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 15px;
      margin: 28px 0 12px;
    }

    .catalog-heading h3 { margin: 0; font-size: 20px; }
    .catalog-heading span { color: var(--muted); font-size: 12px; }

    .catalog-intro {
      position: relative;
      isolation: isolate;
      display: flex;
      align-items: center;
      min-height: 238px;
      padding: 18px;
      overflow: hidden;
      border: 1px solid #cfe0ff;
      border-radius: 22px;
      background-color: var(--card);
      background-image: url("../img/services_hero_banner.jpg");
      background-position: center;
      background-size: cover;
    }

    .catalog-intro::after {
      position: absolute;
      inset: 0;
      z-index: -1;
      content: "";
      background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 48%, rgba(255,255,255,.05) 74%);
    }

    .catalog-intro-copy { width: 59%; }
    .catalog-intro .eyebrow { color: var(--green); }
    .catalog-intro h2 { margin: 7px 0 6px; font-size: clamp(26px, 6.5vw, 34px); line-height: .98; }
    .catalog-intro .lead { margin: 0; color: var(--ink); font-size: 13px; }

    .catalog-intro button {
      min-height: 40px;
      margin-top: 15px;
      padding: 9px 13px;
      border: 0;
      border-radius: 12px;
      background: var(--lime);
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
      box-shadow: 0 7px 18px rgba(250, 204, 21, .22);
    }

    .catalog-intro button:focus-visible {
      outline: 3px solid rgba(37, 99, 235, .2);
      outline-offset: 2px;
    }

    @media (max-width: 390px) {
      .catalog-intro { min-height: 220px; padding: 15px; background-position: 54% center; }
      .catalog-intro-copy { width: 64%; }
      .catalog-intro h2 { font-size: 25px; }
      .catalog-intro::after { background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.91) 52%, rgba(255,255,255,.1) 78%); }
    }

    .service-search {
      position: relative;
      margin: 20px 0 2px;
    }

    .service-search svg {
      position: absolute;
      top: 50%;
      left: 15px;
      width: 21px;
      height: 21px;
      color: var(--muted);
      transform: translateY(-50%);
      pointer-events: none;
    }

    .service-search input {
      width: 100%;
      height: 52px;
      padding: 0 45px 0 46px;
      border: 1px solid var(--line);
      border-radius: 17px;
      outline: none;
      background: var(--card);
      color: var(--ink);
      box-shadow: 0 7px 22px rgba(37, 99, 235, .05);
    }

    .service-search input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

    .search-clear {
      position: absolute;
      top: 50%;
      right: 8px;
      display: none;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 11px;
      background: var(--soft);
      color: var(--muted);
      transform: translateY(-50%);
      cursor: pointer;
    }

    .search-clear.visible { display: grid; place-items: center; }

    .search-status {
      min-height: 18px;
      margin: 7px 2px 0;
      color: var(--ink);
      font-size: 11px;
    }

    .service-search-results {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .service-search-results[hidden],
    .catalog-browse[hidden],
    .service-modal[hidden] { display: none; }

    .search-result {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 62px;
      padding: 11px 13px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--card);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .search-result span { min-width: 0; }
    .search-result strong, .search-result small { display: block; }
    .search-result strong { font-size: 14px; }
    .search-result small {
      margin-top: 3px;
      overflow: hidden;
      color: var(--ink);
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-result > b {
      padding: 7px 9px;
      border-radius: 9px;
      background: var(--soft);
      color: var(--green-dark);
      font-size: 11px;
    }

    .trust-strip {
      display: flex;
      gap: 7px;
      margin: 14px 0 2px;
      padding-bottom: 2px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .trust-strip::-webkit-scrollbar { display: none; }

    .trust-strip span {
      flex: 0 0 auto;
      padding: 7px 10px;
      border: 1px solid #cfe0ff;
      border-radius: 999px;
      background: var(--soft);
      color: var(--green-dark);
      font-size: 10px;
      font-weight: 850;
    }

    .catalog-popular {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-popular .service {
      grid-template-columns: 44px minmax(0, 1fr);
      align-content: start;
      min-height: 104px;
      padding: 12px;
      border-radius: 18px;
    }

    .catalog-popular .service-icon {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      font-size: 17px;
    }

    .catalog-popular .service h3 { font-size: 14px; }
    .catalog-popular .service p,
    .catalog-popular .service-arrow { display: none; }
    .catalog-popular .service-meta { grid-column: 1 / -1; }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .category-card {
      position: relative;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 2px 10px;
      min-height: 104px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--card);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .category-card .group-icon {
      grid-row: 1 / 3;
      width: 42px;
      height: 42px;
      border-radius: 13px;
    }

    .category-card strong { align-self: end; font-size: 13px; line-height: 1.15; }
    .category-card small { align-self: start; color: var(--muted); font-size: 10px; line-height: 1.25; }
    .category-card > b {
      position: absolute;
      top: 8px;
      right: 8px;
      display: grid;
      place-items: center;
      min-width: 22px;
      height: 22px;
      padding: 0 5px;
      border-radius: 8px;
      background: var(--soft);
      color: var(--green);
      font-size: 10px;
    }

    .category-card:hover,
    .category-card:focus-visible,
    .search-result:hover,
    .search-result:focus-visible {
      border-color: var(--green);
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

    .service-modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: grid;
      align-items: end;
      justify-items: center;
    }

    .service-modal-backdrop {
      position: absolute;
      inset: 0;
      width: 100%;
      border: 0;
      background: rgba(23, 32, 51, .48);
      backdrop-filter: blur(3px);
    }

    .service-sheet {
      position: relative;
      z-index: 1;
      width: min(100%, 520px);
      max-height: min(82vh, 720px);
      padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
      overflow-y: auto;
      border-radius: 24px 24px 0 0;
      background: var(--paper);
      box-shadow: 0 -16px 45px rgba(23, 37, 84, .2);
    }

    .service-sheet-handle {
      width: 42px;
      height: 4px;
      margin: 0 auto 9px;
      border-radius: 999px;
      background: var(--line);
    }

    .service-sheet header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .service-sheet header span {
      color: var(--green);
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .service-sheet h3 { margin: 2px 0 0; font-size: 24px; }
    .service-sheet-close {
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 13px;
      background: var(--soft);
      color: var(--ink);
      font-size: 25px;
      cursor: pointer;
    }

    .service-modal-description { margin: 7px 0 13px; color: var(--muted); font-size: 12px; }
    .service-modal-list { display: grid; gap: 7px; }

    .modal-service-option {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 50px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .modal-service-option span { font-size: 13px; font-weight: 750; }
    .modal-service-option b { color: var(--green); font-size: 21px; }
    .modal-service-option:hover,
    .modal-service-option:focus-visible { border-color: var(--green); outline: none; background: var(--soft); }

    .service-modal-help {
      width: 100%;
      min-height: 48px;
      margin-top: 12px;
      border: 0;
      border-radius: 14px;
      background: var(--green);
      color: white;
      font-weight: 800;
      cursor: pointer;
    }

    body.modal-open { overflow: hidden; }

    .service-groups { display: grid; gap: 10px; }

    .service-group {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 19px;
      background: var(--card);
    }

    .service-group summary {
      display: grid;
      grid-template-columns: 44px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 14px;
      cursor: pointer;
      list-style: none;
      font-weight: 800;
    }

    .service-group summary::-webkit-details-marker { display: none; }

    .group-icon {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: var(--soft);
      color: var(--green);
      font-size: 19px;
    }

    .group-title small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 400;
    }

    .chevron {
      color: var(--muted);
      transition: transform .2s ease;
    }

    .service-group[open] .chevron { transform: rotate(180deg); }

    .service-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px;
      padding: 0 14px 15px;
      border-top: 1px solid var(--line);
      padding-top: 13px;
    }

    .service-chip {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      min-height: 42px;
      padding: 9px 11px;
      border: 0;
      border-radius: 12px;
      background: var(--paper);
      color: var(--ink);
      text-align: left;
      font-size: 12px;
      cursor: pointer;
    }

    .service-chip::after {
      content: "›";
      color: var(--green);
      font-size: 18px;
    }

    .service-chip:hover { background: var(--soft); color: var(--green); }
    .service[hidden],
    .service-chip[hidden], .service-group[hidden] { display: none; }

    .catalog-help {
      margin-top: 14px;
      padding: 20px;
      border-radius: 20px;
      background: var(--green);
      color: white;
    }

    .catalog-help-label {
      display: block;
      margin-bottom: 5px;
      color: rgba(255, 255, 255, .78);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .catalog-help h3 { margin: 0 0 15px; font-size: 20px; }
    .catalog-help p { margin-bottom: 15px; color: rgba(255, 255, 255, .78); font-size: 13px; }

    .catalog-help ol {
      display: grid;
      gap: 11px;
      margin: 0 0 17px;
      padding: 0;
      list-style: none;
      counter-reset: help-step;
    }

    .catalog-help li {
      position: relative;
      min-height: 36px;
      padding-left: 46px;
      counter-increment: help-step;
    }

    .catalog-help li::before {
      content: counter(help-step);
      position: absolute;
      top: 0;
      left: 0;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      background: rgba(255, 255, 255, .14);
      font-size: 14px;
      font-weight: 900;
    }

    .catalog-help li b,
    .catalog-help li span { display: block; }
    .catalog-help li b { font-size: 13px; }
    .catalog-help li span {
      margin-top: 2px;
      color: rgba(255, 255, 255, .76);
      font-size: 11px;
      line-height: 1.4;
    }

    .catalog-help button {
      min-height: 48px;
      border: 0;
      border-radius: 13px;
      padding: 11px 14px;
      background: var(--lime);
      color: var(--green-dark);
      font-weight: 850;
      cursor: pointer;
    }

    .documents-note {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid #cfe0ff;
      border-radius: 16px;
      background: var(--soft);
      color: var(--green-dark);
      font-size: 12px;
    }

    .seo-links {
      margin-top: 14px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--card);
    }

    .seo-links h3 {
      margin: 0 0 4px;
      font-size: 16px;
    }

    .seo-links > p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .seo-links div {
      display: grid;
      gap: 7px;
    }

    .seo-links a {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) auto;
      align-items: center;
      min-height: 44px;
      gap: 10px;
      padding: 7px 12px 7px 7px;
      border-radius: 12px;
      background: var(--soft);
      color: var(--green);
      font-size: 13px;
      font-weight: 850;
      text-decoration: none;
    }

    .seo-link-icon {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--lime);
      color: #111111;
    }

    .seo-link-icon svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .seo-links a > b {
      font-size: 15px;
    }

    .seo-links a:hover,
    .seo-links a:focus-visible {
      background: var(--green);
      color: white;
      outline: none;
    }

    .page-back {
      display: flex;
      align-items: center;
      width: fit-content;
      min-height: 44px;
      margin-bottom: 18px;
      padding: 9px 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      color: var(--green);
      font-size: 13px;
      font-weight: 850;
      text-decoration: none;
    }

    .page-back:hover,
    .page-back:focus-visible {
      border-color: var(--green);
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

    .landing-page {
      padding-top: 20px;
    }

    .landing-page .eyebrow {
      display: block;
      margin-bottom: 10px;
    }

    .landing-page h1 {
      margin: 0 0 12px;
      max-width: 460px;
      font-size: clamp(32px, 8vw, 44px);
      line-height: 1.02;
      letter-spacing: -.045em;
    }

    .landing-page .lead {
      margin-bottom: 22px;
      font-size: 16px;
      line-height: 1.5;
    }

    .landing-product {
      color: inherit;
      text-decoration: none;
    }

    .landing-product:hover,
    .landing-product:focus-visible {
      border-color: var(--green);
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

    .delivery-methods {
      margin: 0 0 18px;
    }

    .delivery-methods h2 {
      margin-bottom: 10px;
      font-size: 24px;
    }

    .delivery-payment {
      margin: 0 0 12px;
      padding: 11px 13px;
      border: 1px solid var(--lime);
      border-radius: 12px;
      background: color-mix(in srgb, var(--lime) 18%, white);
      color: var(--ink);
      font-size: 13px;
    }

    .delivery-method-list {
      display: grid;
      gap: 9px;
    }

    .delivery-method {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--card);
    }

    .delivery-method-icon {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--lime);
      color: #111111;
    }

    .delivery-method-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .delivery-method h3 {
      margin: 0 0 3px;
      font-size: 15px;
    }

    .delivery-method p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    @media (min-width: 440px) {
      .service-list { grid-template-columns: 1fr 1fr; }
    }

    .examples-page > h2 {
      margin: 7px 0 10px;
    }

    .examples-page > .lead {
      margin-bottom: 15px;
      font-size: 15px;
      line-height: 1.5;
    }

    .example-notice {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 9px;
      margin: 15px 0 0;
      padding: 12px;
      border: 1px solid #cfe0ff;
      border-radius: 14px;
      background: var(--soft);
    }

    .example-notice svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: var(--green);
      stroke-width: 2;
      stroke-linecap: round;
    }

    .example-notice p {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .example-filter-select {
      display: none;
      gap: 6px;
      margin-bottom: 8px;
    }

    .example-filter-select > span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .example-filter-select select {
      width: 100%;
      min-height: 48px;
      padding: 0 42px 0 13px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--card);
      color: var(--ink);
      font-size: 14px;
      font-weight: 850;
      cursor: pointer;
    }

    .example-filter-select select:focus-visible {
      border-color: var(--green);
      outline: 3px solid rgba(37, 99, 235, .16);
      outline-offset: 1px;
    }

    .example-filter {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 9px;
    }

    .example-filter button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding: 7px 5px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      color: var(--muted);
      font-size: 9px;
      font-weight: 850;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
      cursor: pointer;
    }

    .example-filter-count {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border-radius: 999px;
      background: var(--soft);
      color: var(--green);
      font-size: 9px;
      font-weight: 900;
    }

    .example-filter button.selected {
      border-color: var(--green);
      background: var(--green);
      color: white;
    }

    .example-filter button.selected .example-filter-count {
      background: white;
      color: var(--green);
    }

    .example-filter button:focus-visible {
      outline: 3px solid rgba(37, 99, 235, .2);
      outline-offset: 2px;
    }

    .example-results {
      margin: 2px 0 10px;
      color: var(--muted);
      font-size: 11px;
    }

    .example-library {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .example-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 19px;
      background: var(--card);
    }

    .example-card[hidden] { display: none; }

    .example-preview {
      min-height: 130px;
      background:
        linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px),
        var(--soft);
      background-size: 16px 16px;
    }

    .example-preview img {
      display: block;
      width: 100%;
      height: 130px;
      object-fit: contain;
    }

    .example-card-copy {
      padding: 10px 10px 8px;
    }

    .example-card-copy > span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }

    .example-card-copy h3 {
      margin: 4px 0 7px;
      font-size: 13px;
      line-height: 1.2;
    }

    .example-card-copy strong {
      display: inline-flex;
      padding: 4px 7px;
      border-radius: 8px;
      background: var(--soft);
      color: var(--green);
      font-size: 12px;
    }

    .example-card-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 7px;
      padding: 0 10px 10px;
    }

    .example-card-actions button,
    .example-card-actions a {
      display: grid;
      place-items: center;
      min-height: 44px;
      padding: 8px;
      border: 1px solid var(--green);
      border-radius: 12px;
      background: var(--green);
      color: white;
      font-size: 11px;
      font-weight: 850;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
    }

    .example-card-actions button:disabled {
      border-color: var(--line);
      background: #f2f5f9;
      color: var(--muted);
      cursor: not-allowed;
    }

    .example-card-actions button:not(:disabled):focus-visible,
    .example-card-actions a:focus-visible {
      outline: 3px solid rgba(37, 99, 235, .2);
      outline-offset: 2px;
    }

    @media (min-width: 440px) {
      .example-filter button {
        padding-inline: 8px;
        font-size: 10px;
      }

      .example-library {
        gap: 12px;
      }

      .example-preview {
        min-height: 190px;
      }

      .example-preview img {
        height: 190px;
      }

      .example-card-copy {
        padding: 13px 14px 10px;
      }

      .example-card-copy h3 {
        font-size: 16px;
      }

      .example-card-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 0 14px 14px;
      }
    }

    @media (min-width: 700px) {
      .example-filter button {
        justify-content: space-between;
        padding-inline: 10px;
        font-size: 11px;
      }
    }

    .contacts-page > h2 {
      margin: 7px 0 10px;
    }

    .contacts-page > .lead {
      margin-bottom: 16px;
      font-size: 15px;
      line-height: 1.5;
    }

    .contact-list {
      display: grid;
      gap: 9px;
    }

    .contact-link {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      min-height: 72px;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--card);
      color: var(--ink);
      text-decoration: none;
    }

    .contact-link-icon,
    .pickup-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      background: var(--lime);
      color: var(--green-dark);
    }

    .contact-link-icon svg,
    .pickup-icon svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .contact-link small,
    .contact-link strong,
    .contact-link em {
      display: block;
    }

    .contact-link small {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }

    .contact-link strong {
      margin-top: 2px;
      font-size: 14px;
    }

    .contact-link em {
      margin-top: 2px;
      color: var(--green);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
    }

    .contact-link > b {
      color: var(--green);
      font-size: 17px;
    }

    .contact-link:hover,
    .contact-link:focus-visible,
    .pickup-card a:focus-visible,
    .contact-delivery > a:focus-visible {
      border-color: var(--green);
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

    .pickup-card {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 12px;
      margin-top: 14px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--card);
    }

    .pickup-card > div > span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }

    .pickup-card h3 {
      margin: 4px 0 2px;
      font-size: 17px;
    }

    .pickup-card p {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 12px;
    }

    .pickup-card a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 9px 12px;
      border: 1px solid var(--green);
      border-radius: 11px;
      color: var(--green);
      font-size: 12px;
      font-weight: 850;
      text-decoration: none;
    }

    .contact-delivery {
      margin-top: 14px;
      padding: 18px;
      border-radius: 20px;
      background: var(--green);
      color: white;
    }

    .contact-delivery .eyebrow {
      color: var(--lime);
    }

    .contact-delivery h3 {
      margin: 7px 0 7px;
      font-size: 20px;
    }

    .contact-delivery > div > p {
      margin: 0;
      color: rgba(255, 255, 255, .8);
      font-size: 12px;
      line-height: 1.5;
    }

    .contact-delivery-note {
      margin: 13px 0;
      padding: 9px 11px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .12);
      font-size: 12px;
    }

    .contact-delivery > a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 10px 13px;
      border-radius: 12px;
      background: var(--lime);
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 900;
      text-decoration: none;
    }

    .bottom-nav {
      position: fixed;
      z-index: 20;
      left: 50%;
      bottom: 0;
      width: min(100%, 520px);
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: 1fr 1fr 1.18fr 1fr 1fr;
      align-items: end;
      padding: 9px 10px max(9px, env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 -10px 32px rgba(23, 37, 84, .13);
      backdrop-filter: blur(18px);
    }

    .nav-item {
      display: grid;
      justify-items: center;
      gap: 4px;
      border: 0;
      background: none;
      color: #667085;
      font-size: 10px;
      cursor: pointer;
    }

    .nav-item svg { width: 23px; height: 23px; }
    .nav-item.active { color: var(--green); font-weight: 800; }

    .chat-nav {
      transform: translateY(-17px);
      color: var(--green-dark);
      font-weight: 850;
    }

    .chat-bubble {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      border: 5px solid var(--paper);
      border-radius: 21px;
      background: var(--lime);
      box-shadow: 0 8px 24px rgba(23, 107, 77, .22);
    }

    .chat-bubble svg { width: 28px; height: 28px; }

    .chat {
      position: fixed;
      z-index: 50;
      inset: 0;
      display: none;
      width: min(100%, 520px);
      height: 100dvh;
      margin: auto;
      grid-template-rows: auto 1fr auto;
      background: var(--message-bg);
    }

    .chat.open { display: grid; animation: chatIn .25s ease; }

    @keyframes chatIn {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .chat-header {
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;
      gap: 10px;
      padding: max(12px, env(safe-area-inset-top)) 12px 12px;
      background: #fff;
      box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
    }

    .icon-button {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 0;
      border-radius: 13px;
      background: transparent;
      cursor: pointer;
    }

    .operator {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .avatar {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--green);
      color: white;
      font-weight: 900;
    }

    .operator strong, .operator small { display: block; }
    .operator small { color: #269365; font-size: 12px; }

    .chat-account-link {
      margin-left: auto;
      padding: 8px 10px;
      border-radius: 11px;
      background: var(--soft);
      color: var(--green);
      font-size: 10px;
      font-weight: 850;
      text-align: center;
      text-decoration: none;
    }

    .messages {
      overflow-y: auto;
      padding: 18px 13px;
      background-color: var(--message-bg);
      background-image: radial-gradient(color-mix(in srgb, var(--green) 12%, transparent) 1px, transparent 1px);
      background-size: 18px 18px;
    }

    .day {
      width: max-content;
      margin: 0 auto 16px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(84, 112, 96, .55);
      color: white;
      font-size: 11px;
    }

    .message {
      width: fit-content;
      max-width: 84%;
      margin: 7px 0;
      padding: 10px 12px 7px;
      border-radius: 8px 17px 17px 17px;
      background: white;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .09);
    }

    .message.me {
      margin-left: auto;
      border-radius: 17px 8px 17px 17px;
      background: color-mix(in srgb, var(--sky) 35%, white);
    }

    .message time {
      float: right;
      margin: 7px 0 0 12px;
      color: #6f7973;
      font-size: 10px;
    }

    .file-message {
      display: grid;
      gap: 7px;
      width: min(82%, 310px);
      padding: 9px;
    }

    .file-message strong {
      font-size: 12px;
    }

    .file-message img {
      display: block;
      width: 100%;
      max-height: 230px;
      object-fit: contain;
      border-radius: 12px;
      background: white;
    }

    .file-message small,
    .file-box {
      color: var(--muted);
      font-size: 10px;
      overflow-wrap: anywhere;
    }

    .file-box {
      display: block;
      padding: 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .55);
    }

    .order-card-message {
      display: grid;
      gap: 9px;
      width: min(86%, 340px);
      padding: 12px;
      border: 1px solid rgba(37, 99, 235, .18);
    }

    .order-card-title {
      color: var(--green-dark);
      font-size: 14px;
    }

    .order-card-meta,
    .order-card-section,
    .order-card-files,
    .order-card-next {
      padding: 9px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .58);
    }

    .order-card-meta {
      display: grid;
      gap: 6px;
    }

    .order-card-meta div {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 8px;
    }

    .order-card-meta span,
    .order-card-section > span {
      color: var(--muted);
      font-size: 10px;
    }

    .order-card-meta b {
      color: var(--ink);
      font-size: 11px;
    }

    .order-card-section ul {
      display: grid;
      gap: 5px;
      margin: 7px 0 0;
      padding: 0;
      list-style: none;
    }

    .order-card-section li {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink);
      font-size: 11px;
    }

    .order-card-section li b {
      flex: 0 0 auto;
    }

    .order-card-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-radius: 12px;
      background: var(--green-dark);
      color: white;
    }

    .order-card-total span { font-size: 10px; }
    .order-card-total strong { font-size: 18px; }

    .order-card-files,
    .order-card-next {
      color: var(--green-dark);
      font-size: 10px;
      line-height: 1.35;
    }

    .order-assistant {
      width: 100%;
      margin: 8px 0 15px;
      padding: 14px;
      border-radius: 20px;
      background: white;
      box-shadow: 0 8px 30px rgba(23, 37, 84, .12);
    }

    .assistant-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 13px;
      border-bottom: 1px solid var(--line);
    }

    .assistant-avatar {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 12px;
      background: var(--green);
      color: white;
      font-weight: 900;
      transform: rotate(-3deg);
    }

    .assistant-head strong, .assistant-head small { display: block; }
    .assistant-head small { margin-top: 2px; color: var(--muted); font-size: 10px; }

    .order-progress {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      margin-top: 12px;
    }

    .order-progress span {
      height: 5px;
      border-radius: 999px;
      background: #dbeafe;
    }

    .order-progress span.active {
      background: var(--green);
      box-shadow: 0 2px 8px rgba(37, 99, 235, .2);
    }

    .order-screen-label {
      margin-top: 7px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 750;
    }

    .order-screen[hidden] { display: none; }

    .order-microcopy {
      margin: 9px 1px 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.4;
    }

    .order-step {
      display: grid;
      grid-template-columns: 27px 1fr;
      gap: 9px;
      align-items: start;
      margin-top: 15px;
    }

    .order-kind-switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-top: 10px;
    }

    .order-kind {
      min-width: 0;
      padding: 10px;
      border: 1.5px solid var(--line);
      border-radius: 13px;
      background: white;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .order-kind strong, .order-kind span { display: block; }
    .order-kind strong { font-size: 11px; }
    .order-kind span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.3; }

    .order-kind.selected {
      border-color: var(--green);
      background: var(--soft);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
    }

    .order-fields {
      display: grid;
      gap: 7px;
      margin-top: 10px;
    }

    .order-field {
      width: 100%;
      height: 42px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 12px;
      outline: none;
      background: #fafcff;
      color: var(--ink);
      font-size: 11px;
    }

    textarea.order-field {
      height: 70px;
      padding-top: 10px;
      resize: vertical;
    }

    .order-field:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, .09);
    }

    .optional-file {
      display: block;
      margin-top: 7px;
      padding: 9px 11px;
      border: 1px dashed #a9bee8;
      border-radius: 12px;
      background: var(--soft);
      color: var(--green);
      font-size: 10px;
      font-weight: 750;
      cursor: pointer;
    }

    .optional-file input { display: none; }

    .logo-file-name {
      margin-top: 6px;
      color: #176b4d;
      font-size: 10px;
    }

    .round-pad-option {
      margin-top: 10px;
      background: linear-gradient(135deg, #ffffff, var(--soft));
    }
    .round-pad-option[hidden] { display: none; }

    .step-number {
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      border-radius: 9px;
      background: var(--soft);
      color: var(--green);
      font-size: 12px;
      font-weight: 900;
    }

    .step-copy strong, .step-copy span { display: block; }
    .step-copy strong { font-size: 13px; }
    .step-copy span { margin-top: 1px; color: var(--muted); font-size: 10px; }

    .upload-zone {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 3px;
      margin-top: 10px;
      padding: 18px 12px;
      border: 1.5px dashed #a9bee8;
      border-radius: 15px;
      background: var(--soft);
      color: var(--green);
      text-align: center;
      cursor: pointer;
    }

    .upload-zone input {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }
    .upload-zone small { color: var(--muted); font-size: 10px; }
    .upload-icon { font-size: 24px; line-height: 1; }

    .uploaded-file {
      display: grid;
      gap: 8px;
      margin-top: 8px;
      padding: 9px 11px;
      border-radius: 12px;
      background: #edf9f2;
      color: #176b4d;
      font-size: 11px;
      font-weight: 750;
    }

    .uploaded-file[hidden] { display: none; }

    .uploaded-file-preview {
      width: 100%;
      max-height: 180px;
      object-fit: contain;
      border-radius: 10px;
      background: var(--surface);
    }

    .order-error {
      margin: 9px 0 0;
      padding: 8px 10px;
      border-radius: 11px;
      background: #fff1f2;
      color: #be123c;
      font-size: 10px;
      font-weight: 800;
    }

    .order-error[hidden] { display: none; }

    .equipment-step { margin-bottom: 10px; }
    .equipment-list { display: grid; gap: 9px; }
    .equipment-list[hidden] { display: none; }

    .equipment-card {
      position: relative;
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 11px;
      width: 100%;
      padding: 8px;
      overflow: hidden;
      border: 1.5px solid var(--line);
      border-radius: 16px;
      background: white;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .equipment-card.multi-product {
      grid-template-columns: auto 82px 1fr;
      align-items: center;
    }

    .equipment-check {
      width: 20px;
      height: 20px;
      accent-color: var(--green);
    }

    .equipment-card.selected {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
    }

    .product-photo-placeholder {
      display: grid;
      place-items: center;
      min-height: 92px;
      aspect-ratio: 1;
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(125, 211, 252, .2)),
        var(--soft);
      color: #7890bb;
      text-align: center;
      font-size: 9px;
      font-weight: 750;
      line-height: 1.25;
    }

    .product-photo-placeholder::before {
      content: "▧";
      position: absolute;
      color: rgba(37, 99, 235, .14);
      font-size: 55px;
    }

    .product-photo-placeholder.has-image {
      overflow: hidden;
      border: 1px solid #edf2fb;
      background: #fff;
    }

    .product-photo-placeholder.has-image::before { display: none; }

    .product-photo-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
      mix-blend-mode: multiply;
    }

    .product-photo-placeholder span { position: relative; z-index: 1; }

    .equipment-info { align-self: center; min-width: 0; }
    .equipment-title { display: block; font-size: 13px; font-weight: 850; }
    .equipment-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 5px;
    }

    .equipment-specs span {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 3px 6px;
      border: 1px solid #cfe0ff;
      border-radius: 999px;
      background: var(--soft);
      color: var(--green-dark);
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .equipment-description { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }

    .equipment-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
      font-size: 10px;
    }

    .equipment-bottom strong {
      padding: 3px 6px;
      border-radius: 7px;
      background: var(--green);
      color: white;
    }

    .equipment-bottom span { color: var(--muted); }

    .qty-control {
      display: inline-grid;
      grid-template-columns: 28px 28px 28px;
      align-items: center;
      width: max-content;
      margin-top: 8px;
      overflow: hidden;
      border: 1px solid #cfe0ff;
      border-radius: 999px;
      background: white;
    }

    .qty-btn {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 0;
      background: var(--soft);
      color: var(--green);
      font-size: 17px;
      font-weight: 900;
      cursor: pointer;
    }

    .qty-value {
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }

    .pad-qty-control {
      margin-top: 0;
    }

    .choice-mark {
      position: absolute;
      top: 7px;
      right: 7px;
      display: none;
      place-items: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--green);
      color: white;
      font-size: 11px;
    }

    .equipment-card.selected .choice-mark { display: grid; }

    .recommended-label {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      padding: 3px 7px;
      border-radius: 0 0 8px 0;
      background: var(--lime);
      color: var(--green-dark);
      font-size: 8px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .order-total {
      margin-top: 12px;
      padding: 12px;
      border-radius: 14px;
      background: var(--green-dark);
      color: white;
    }

    .order-total > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .order-total span { font-size: 10px; }
    .order-total strong { font-size: 19px; }
    .order-total small { display: block; margin-top: 5px; color: rgba(255, 255, 255, .66); font-size: 9px; }

    .order-summary {
      display: grid;
      gap: 7px;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fafcff;
    }

    .order-summary div {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 9px;
      align-items: start;
    }

    .order-summary span {
      color: var(--muted);
      font-size: 10px;
    }

    .order-summary strong {
      color: var(--ink);
      font-size: 11px;
      line-height: 1.3;
    }

    .order-price-details,
    .next-steps {
      margin-top: 10px;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: white;
    }

    .order-price-details > strong,
    .next-steps > strong {
      display: block;
      margin-bottom: 7px;
      color: var(--ink);
      font-size: 12px;
    }

    .price-lines {
      display: grid;
      gap: 5px;
    }

    .price-line {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 10px;
    }

    .price-line strong {
      flex: 0 0 auto;
      color: var(--ink);
      font-size: 11px;
    }

    .next-steps ol {
      display: grid;
      gap: 5px;
      margin: 0;
      padding-left: 17px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.35;
    }

    .documents-note.mini {
      margin-top: 10px;
      font-size: 10px;
    }

    .order-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 10px;
    }

    .order-actions:has(.order-back) { grid-template-columns: .75fr 1.25fr; }

    .order-actions button {
      width: 100%;
      min-height: 45px;
      border: 1px solid var(--line);
      border-radius: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .order-actions .primary,
    .confirm-order.primary {
      border-color: transparent;
      background: var(--lime);
      color: var(--green-dark);
    }

    .order-back {
      background: white;
      color: var(--green);
    }

    .confirm-order:disabled {
      opacity: .7;
      cursor: default;
    }

    .composer-wrap { background: white; padding-bottom: env(safe-area-inset-bottom); }

    .composer {
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: end;
      gap: 4px;
      padding: 8px;
      border-top: 1px solid #e2e2e2;
    }

    .composer input {
      min-width: 0;
      height: 42px;
      padding: 0 14px;
      border: 1px solid #dadeda;
      border-radius: 17px;
      outline: none;
      background: #f7f8f7;
    }

    .composer input:focus { border-color: #77a791; }

    .send {
      background: var(--green);
      color: white;
      border-radius: 50%;
    }

    .hidden { display: none; }

    @media (min-width: 700px) {
      body { padding: 20px 0; }
      .app { min-height: calc(100dvh - 40px); border-radius: 28px; }
      .bottom-nav { bottom: 20px; border-radius: 0 0 28px 28px; }
      .chat { height: calc(100dvh - 40px); border-radius: 28px; overflow: hidden; }
    }