.hms-tools {
    --t-ink: #20245f;
    --t-muted: #65718a;
    --t-primary: #2e3192;
    --t-primary-dark: #20246d;
    --t-soft: #eef0fb;
    --t-paper: #fff;
    --t-bg: #f7f8fc;
    --t-line: #dde2ef;
    color: var(--t-ink);
    background: var(--t-bg);
    font-family: Poppins,"Segoe UI",Arial,sans-serif;
    font-size: 15px;
    line-height:1.6
}

.hms-tools * {
    box-sizing:border-box
}

.hms-tools [hidden] {
    display:none!important
}

.hms-tools h1,.hms-tools h2,.hms-tools h3,.hms-tools h4,.hms-tools p {
    color: inherit;
    margin:0
}

.hms-tools h1,.hms-tools h2,.hms-tools h3 {
    letter-spacing: -.035em;
    line-height:1.2
}

.hms-tools h2 {
    font-size: 26px;
    font-weight:500
}

.hms-tools h3 {
    font-size: 20px;
    font-weight:650
}

.hms-tools a {
    color:inherit
}

.hms-tools button,.hms-tools input,.hms-tools select,.hms-tools textarea {
    font:inherit
}

.hms-tools button,.hms-tools a,.hms-tools input,.hms-tools select,.hms-tools textarea {
    outline-offset:4px
}

.hms-tools :focus-visible {
    outline:3px solid #8e9aee
}

.hms-tools button {
    cursor:pointer
}

.hms-tools button:disabled {
    cursor: wait;
    opacity:.55
}

.tools-wrap {
    min-width: 0;
}

.tools-hero {
    background: #2e3192 url("/img/page-banner/about-page-banner.jpg") no-repeat bottom center / cover;
    color: #fff;
    padding: 36px 0 40px;
    position: relative;
    overflow:hidden
}

.tools-hero-home {
    padding-bottom:28px
}

.tools-eyebrow,.t-kicker {
    display: block;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .14em;
    font-weight:750
}

.tools-eyebrow {
    color: #c9dcff;
    margin-bottom:13px
}

.tools-hero h1 {
    font-size: 42px;
    font-weight: 650;
    max-width:820px
}

.tools-hero p {
    color: #dde2fa;
    max-width: 670px;
    margin-top: 16px;
    font-size: 16px;
    line-height:1.7
}

.tools-hero em,.t-trip-empty em {
    font-family: Georgia,serif;
    font-weight: 400;
    color:#c9dcff
}

.tools-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,460px);
    align-items: center;
    gap:32px
}

.tools-hero-home h1 {
    font-size: 36px;
    line-height:1.2
}

.tools-hero-home .tools-eyebrow {
    margin-bottom:8px
}

.tools-hero-home p {
    max-width: 520px;
    margin-top: 10px;
    font-size: 14px;
    line-height:1.65
}

.tools-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top:16px
}

.tools-hero-home .t-button {
    margin-top: 0;
    min-height: 36px;
    padding: 9px 14px;
    font-size:12px
}

.tools-hero-actions > span {
    color: #d3dbf8;
    font-size:10px
}

.tools-hero-previews {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap:14px
}

.tools-hero .tools-preview-card {
    display: block;
    min-width: 0;
    padding: 10px;
    border: 1px solid #ffffff66;
    border-radius: 12px;
    background: #fff;
    color: #20245f;
    box-shadow: 0 8px 22px #15184233;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease
}

.tools-preview-card img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: contain;
    border-radius:7px
}

.tools-preview-card > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    padding: 0 3px;
    font-size:11px
}

.tools-preview-card strong {
    font-weight:600
}

.tools-hero .tools-preview-card:hover {
    transform: translateY(-2px);
    box-shadow:0 12px 28px #15184255
}

.tools-nav {
    background: #fff;
    border-bottom:1px solid var(--t-line)
}

.tools-nav .tools-wrap {
    display: flex;
    overflow: auto;
    gap: 30px;
    scrollbar-width: none;
}

.tools-nav .tools-wrap::-webkit-scrollbar { display: none; }

#builder-preview, #builder-code, #trip-results, .t-stop { scroll-margin-top: 90px; }

.tools-nav a {
    padding: 18px 0 15px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--t-muted);
    text-decoration: none;
    border-bottom:3px solid transparent
}

.tools-nav a[aria-current=page] {
    border-color: var(--t-primary);
    color: var(--t-primary);
    font-weight:700
}

.tools-body {
    padding-top: 38px;
    padding-bottom:60px
}

.t-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap:20px
}

.t-kicker {
    color: var(--t-muted);
    margin-bottom:10px
}

.t-section-heading p {
    color: var(--t-muted);
    font-size:14px
}

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

.hms-tools .tools-community-intro {
    max-width: 930px;
    margin: -8px 0 24px;
    color: var(--t-muted);
    font-size: 14px;
    line-height:1.75
}

.tools-community-intro strong {
    color: var(--t-ink);
    font-weight:600
}

.tools-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: linear-gradient(150deg,#fff 60%,#f4f6fd);
    border: 1px solid var(--t-line);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 2px 5px #20245f04;
    text-decoration: none!important;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}

.tools-card:hover,.tools-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px #20245f12;
    border-color:#b4bfe8
}

.t-card-heading {
    display: flex;
    align-items: center;
    gap:11px
}

.t-card-heading > div { min-width:0; }

.t-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e5f6;
    border-radius: 11px;
    background: linear-gradient(145deg,#f4f6ff,#e7ebfc);
    color: var(--t-primary);
    transition: color .18s ease,background .18s ease,border-color .18s ease
}

.t-card-icon svg { width:24px; height:24px; }

.t-card-kind {
    display: block;
    margin-bottom: 4px;
    color: var(--t-muted);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform:uppercase
}

.t-icon-tile {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--t-soft);
    color: var(--t-primary);
    flex-shrink: 0;
    font-size:24px
}

.tools-card h2 {
    color: var(--t-ink);
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height:1.3
}

.tools-card p {
    color: var(--t-muted);
    font-size: 12px;
    line-height: 1.7;
    margin:12px 0 16px
}

.t-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    border-top: 1px solid var(--t-line);
    gap: 8px;
    padding-top: 10px;
    font-size: 11px;
    font-weight: 600;
    color:var(--t-primary)
}

.t-card-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #edf0fb;
    font-size: 16px;
    line-height: 1;
    transition: color .18s ease,background .18s ease
}

.tools-card:hover .t-card-icon,.tools-card:focus-visible .t-card-icon,
.tools-card:hover .t-card-arrow,.tools-card:focus-visible .t-card-arrow {
    background: var(--t-primary);
    border-color: var(--t-primary);
    color:#fff
}

@media(min-width:1200px) {
    .tools-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.tools-bottom-note {
    display: flex;
    align-items: center;
    gap: 25px;
    background: #edf0fb;
    border-radius: 18px;
    margin-top: 38px;
    padding:30px
}

.tools-bottom-note h2 {
    font-size:21px
}

.tools-bottom-note p {
    color: var(--t-muted);
    font-size: 13px;
    max-width: 650px;
    margin-top:10px
}

.tools-bottom-note a {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    margin-left:auto
}

.t-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 13px!important;
    font-weight: 650!important;
    line-height: 1.4;
    text-decoration: none!important;
    transition:background .18s,box-shadow .18s
}

.t-primary {
    color: #fff!important;
    background:var(--t-primary)
}

.t-primary:hover {
    background: var(--t-primary-dark);
    color:#fff
}

.t-secondary {
    color: var(--t-ink);
    background: var(--t-paper);
    border-color:var(--t-line)
}

.t-secondary:hover {
    background:var(--t-soft)
}

.t-button-light {
    color: #20245f!important;
    background: #eef2ff;
    border-color:#eef2ff
}

.t-button-light:hover {
    background:#fff
}

.t-full {
    width: 100%;
    margin-top:20px
}

.t-text-button {
    color: var(--t-primary);
    font-size: 12px!important;
    font-weight: 650;
    background: none;
    border: 0;
    padding: 8px 0;
    text-align:left
}

.t-text-button:hover {
    text-decoration:underline
}

.t-icon-button {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: 8px;
    color: var(--t-ink);
    font-size:23px!important
}

.t-workspace {
    display: grid;
    grid-template-columns: 310px minmax(0,1fr);
    gap: 26px;
    align-items:start
}

.t-panel {
    padding: 24px;
    border: 1px solid var(--t-line);
    border-radius: 16px;
    background: var(--t-paper);
    min-width:0
}

.t-panel-heading {
    display: flex;
    align-items: start;
    gap: 12px;
    margin-bottom:23px
}

.t-panel-heading h2 {
    font-size:21px
}

.t-panel-heading p {
    font-size: 12px;
    color: var(--t-muted);
    line-height: 1.5;
    margin-top:7px
}

.t-step {
    background: var(--t-soft);
    color: var(--t-primary);
    font-size: 11px;
    font-weight: 750;
    border-radius: 9px;
    padding:7px 9px
}

.t-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin:17px 0 7px
}

.t-input {
    display: block;
    width: 100%;
    min-width: 0;
    border: 1px solid #ccd3e5;
    border-radius: 8px;
    background: var(--t-paper);
    color: var(--t-ink);
    min-height: 44px;
    padding: 10px 11px;
    font-size: 13px!important;
    box-shadow:none
}

.t-input::placeholder {
    color:#7b849c
}

.t-input:focus {
    border-color:var(--t-primary)
}

.t-field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:12px
}

.t-details {
    border-top: 1px solid var(--t-line);
    margin-top: 21px;
    padding-top: 16px;
    font-size: 12px;
    color:var(--t-muted)
}

.t-details summary {
    cursor: pointer;
    font-weight: 650;
    color:var(--t-ink)
}

.t-details p {
    margin-top:12px
}

.t-check {
    display: flex;
    gap: 9px;
    align-items: start;
    font-size: 12px;
    margin:16px 0 8px
}

.t-check input {
    margin-top: 4px;
    accent-color:var(--t-primary)
}

.t-help {
    font-size: 11px!important;
    line-height: 1.6;
    color: var(--t-muted)!important;
    margin-top:8px!important
}

.t-help-box {
    display: flex;
    gap: 10px;
    font-size: 11px;
    background: var(--t-soft);
    padding: 14px;
    border-radius: 9px;
    color: var(--t-muted);
    margin-top:22px
}

.t-help-box i {
    color: var(--t-primary);
    font-size: 16px;
    margin-top:2px
}

.t-message {
    padding: 12px 15px;
    background: #fff3dc;
    color: #7c4b0a;
    font-size: 12px;
    border-radius: 8px;
    margin-top: 15px;
    overflow-wrap:anywhere
}

.t-message.t-success {
    background: var(--t-soft);
    color:var(--t-primary)
}

.t-trip-empty {
    text-align: center;
    min-height: 590px;
    padding: 62px 30px;
    background: radial-gradient(ellipse at top,#e9edff,transparent 55%),#fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content:center
}

.t-trip-empty h2 {
    font-size: 35px;
    line-height:1.25
}

.t-trip-empty em {
    color:#494fa1
}

.t-trip-empty p {
    color: var(--t-muted);
    max-width: 430px;
    font-size: 14px;
    margin:20px auto
}

.t-empty-road {
    display: flex;
    align-items: center;
    width: 75%;
    margin: 28px auto 32px;
    color: #6570b2;
    font-size:32px
}

.t-empty-road>i {
    flex: 1;
    border-top:2px dashed #b9c2e9
}

.t-road-food {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #edf0ff;
    border: 7px solid #fff;
    box-shadow: 0 0 0 1px #d7def4;
    font-size:23px
}

.t-example-routes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom:32px
}

.t-example-routes button {
    font-size: 11px!important;
    border: 1px solid var(--t-line);
    background: #fff;
    padding: 8px 11px;
    border-radius: 22px;
    color:var(--t-ink)
}

.t-example-routes button:hover {
    background:var(--t-soft)
}

.t-example-routes span {
    color: #919dd4;
    margin:0 4px
}

.t-empty-features {
    display: flex;
    gap: 27px;
    border-top: 1px solid var(--t-line);
    padding-top: 23px;
    font-size: 10px;
    color:var(--t-primary)
}

.t-empty-features strong {
    color: var(--t-muted);
    display: block;
    margin-top: 5px;
    font-size:11px
}

.t-route-summary {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content:space-between
}

.t-route-summary h2 {
    font-size:23px
}

.t-route-summary p {
    font-size: 12px;
    color: var(--t-muted);
    margin-top:9px
}

.t-view-switch {
    display: flex;
    gap: 3px;
    width: fit-content;
    background: #eef0f9;
    border: 1px solid #dfe3f0;
    padding: 4px;
    border-radius: 10px;
    margin:19px 0
}

.t-view-switch button {
    font-size: 12px!important;
    line-height: 1.4;
    border: 0;
    border-radius: 7px;
    padding: 9px 12px;
    color: #596482;
    background:transparent
}

.t-view-switch button[aria-pressed=true] {
    background: #fff;
    color: #20245f;
    box-shadow:0 1px 4px #20245f12
}

.t-trip-map-panel {
    padding: 0;
    overflow: hidden;
    margin-bottom:26px
}

.t-map {
    height: 330px;
    background:#edf0f8
}

.t-map-caption {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 10px;
    color: var(--t-muted);
    padding:11px 15px
}

.t-map-dot {
    display: inline-block;
    background: var(--t-primary);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right:5px
}

.t-map-dot-option {
    background:#bd9150
}

.t-stop {
    position: relative;
    margin: 0 0 22px 17px;
    padding-left: 27px;
    border-left:2px solid #d2d9ef
}

.t-stop-number {
    position: absolute;
    top: 0;
    left: -16px;
    display: grid;
    place-items: center;
    background: var(--t-primary);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    border:4px solid var(--t-bg)
}

.t-stop-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin: 0 0 14px;
    padding-top:1px
}

.t-stop-heading h3 {
    font-size:20px
}

.t-stop-heading p {
    font-size: 12px;
    color: var(--t-muted);
    margin-top:6px
}

.t-stop-options {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap:12px
}

.t-business {
    border: 1px solid var(--t-line);
    border-radius: 12px;
    background: var(--t-paper);
    overflow: hidden;
    min-width:0
}

.t-business.t-selected {
    border: 2px solid var(--t-primary);
    box-shadow:0 0 0 3px #2e319212
}

.t-business-photo {
    width: 100%;
    height: 115px;
    object-fit: cover;
    display:block
}

.t-business-fallback {
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    background: linear-gradient(135deg,#f0f2fc,#dce3f8);
    color:#626da2
}

.t-business-content {
    padding:14px
}

.t-business h3,.t-business h4 {
    font-size: 15px!important;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing:-.01em
}

.t-business-address {
    color: var(--t-muted);
    font-size: 11px;
    margin-top:6px!important
}

.t-status {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    padding: 3px 7px;
    background: #e8f4ea;
    color: #227146;
    border-radius: 5px;
    margin:8px 0
}

.t-status-neutral {
    color: #79603b;
    background:#f5eedf
}

.t-business-food {
    font-size: 11px;
    color: var(--t-muted);
    margin:6px 0!important
}

.t-business-time {
    font-size: 11px;
    color: var(--t-primary);
    margin-top:5px!important
}

.t-business-time.closed {
    color:#a33c33
}

.t-business-time.unknown {
    color:#8d6a30
}

.t-business-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
    align-items:center
}

.t-business-actions a,.t-business-actions button {
    font-size:11px!important
}

.t-business-actions .t-button {
    padding: 7px 10px;
    min-height:34px
}

.t-business-actions a:not(.t-button) {
    color: var(--t-primary);
    text-decoration:underline
}

.t-food-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin:8px 0
}

.t-food-tags span {
    font-size: 10px;
    background: var(--t-bg);
    border-radius: 4px;
    padding:2px 6px
}

.t-trip-main[data-view=list] .t-stop-options {
    grid-template-columns:1fr
}

.t-trip-main[data-view=list] .t-business {
    display: grid;
    grid-template-columns:130px 1fr
}

.t-trip-main[data-view=list] .t-business-photo,.t-trip-main[data-view=list] .t-business-fallback {
    height: 100%;
    min-height:130px
}

.t-trip-main[data-view=map] .t-map {
    height:620px
}

.t-navigation-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top:22px
}

.t-navigation-panel h3 {
    font-size:18px
}

.t-navigation-panel p {
    font-size: 12px;
    color: var(--t-muted);
    margin-top:7px
}

.t-navigation-panel #trip-google-links {
    display: flex;
    flex-wrap: wrap;
    gap:8px
}

.t-timeline-terminal {
    padding-bottom: 20px;
    font-size:12px
}

.t-timeline-terminal strong {
    display: block;
    font-size:16px
}

.t-dialog {
    border: 1px solid var(--t-line);
    border-radius: 20px;
    padding: 34px;
    max-width: 530px;
    width: calc(100% - 32px);
    background: var(--t-paper);
    color: var(--t-ink);
    box-shadow:0 30px 80px #20245f55
}

.t-dialog::backdrop {
    background: #14173688;
    backdrop-filter:blur(3px)
}

.t-dialog p {
    color: var(--t-muted);
    font-size: 13px;
    margin-top:13px
}

.t-dialog-close {
    float: right;
    background: none;
    border: 0;
    font-size: 28px!important;
    line-height:1
}

.t-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top:16px
}

.t-share-url {
    font-size: 11px!important;
    resize: vertical;
    overflow-wrap:anywhere
}

.t-toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #2e3192;
    color: white;
    border-radius: 10px;
    padding: 12px 22px;
    box-shadow: 0 8px 30px #0003;
    z-index: 2147483647;
    font-size: 13px;
    max-width:90vw
}

.t-builder {
    grid-template-columns:310px minmax(0,1fr)
}

.t-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom:20px
}

.t-preview-heading h2 {
    font-size:25px
}

.t-preview-heading .t-view-switch {
    margin:0
}

.t-preview-stage {
    background: radial-gradient(#c1c8e3 1px,transparent 1px),#f0f2fa;
    background-size: 14px 14px;
    padding: 26px;
    border: 1px solid var(--t-line);
    border-radius: 16px;
    min-height: 320px;
    display: flex;
    align-items: start;
    justify-content:center
}

.t-preview-browser {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 28px #20245f13;
    background: #fff;
    border: 1px solid #d9dfef;
    transition:width .2s
}

.t-preview-browser.t-mobile {
    width:350px
}

.t-browser-bar {
    display: flex;
    justify-content: space-between;
    padding: 11px 14px;
    background: #f8f9fd;
    border-bottom: 1px solid #e3e7f2;
    color: #8590ab;
    font-size: 10px;
    letter-spacing:.02em
}

.t-widget-preview {
    background: #fff;
    min-height:170px
}

.t-widget-preview>iframe {
    display: block;
    width: 100%;
    border:0
}

.t-widget-preview.t-badge-preview {
    padding: 32px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:220px
}

.t-widget-preview.t-badge-preview iframe {
    flex-shrink: 1;
    max-width:100%
}

.t-badge-empty {
    text-align: center;
    padding:28px 20px
}

.t-badge-empty>i {
    font-size: 42px;
    color: #98a7d4;
    margin-top:22px
}

.t-badge-empty h3 {
    max-width: 540px;
    margin: 0 auto;
    font-size: clamp(22px,2.2vw,28px);
    font-weight: 500;
    text-wrap: balance;
    line-height:1.35
}

.t-badge-empty p {
    font-size: 13px;
    color: var(--t-muted);
    margin-top:13px
}

.t-badge-shapes { min-width: 0; padding: 0; margin: 22px 0 0; border: 0; }
.t-badge-shapes legend.t-label { float: none; width: auto; margin: 0 0 10px; font-size: 13px; }
.t-badge-shape-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.t-badge-shape-option { position: relative; margin: 0; cursor: pointer; }
.t-badge-shape-option input, .t-badge-style-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t-badge-shape-option > span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 3px 8px; border: 1px solid var(--t-line); border-radius: 9px; color: #65718a; background: #fff; font-size: 8px; }
.t-shape-icon { display: block; width: 29px; height: 22px; background: linear-gradient(135deg,#b9c5ee,#727ac1); border: 1px solid #6f78b3; box-shadow: inset 0 0 0 2px #fff9; }
.t-shape-pill { border-radius: 20px; height: 16px; margin: 3px 0; }
.t-shape-rounded { border-radius: 6px; }
.t-shape-rectangle { border-radius: 1px; }
.t-shape-ticket { border-radius: 3px; clip-path: polygon(0 0,100% 0,100% 35%,90% 50%,100% 65%,100% 100%,0 100%,0 65%,10% 50%,0 35%); }
.t-shape-circle { width: 22px; border-radius: 50%; }
.t-shape-shield { width: 24px; height: 26px; margin: -2px 0; border: 0; box-shadow: none; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M50 2C65 11 80 15.5 97 18V43C97 70 78 88 50 98C22 88 3 70 3 43V18C20 15.5 35 11 50 2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.t-badge-shape-option input:checked + span { background: #eef1ff; border-color: #5b62ad; color: #2e3192; box-shadow: 0 0 0 1px #5b62ad; }
.t-badge-shape-option input:focus-visible + span, .t-badge-style-option input:focus-visible + .t-badge-style-choice { outline: 3px solid #737acd; outline-offset: 3px; }
.t-badge-styles { min-width: 0; padding: 22px; margin: 24px 0 0; border: 1px solid var(--t-line); }
.t-badge-style-heading { margin-bottom: 18px; }
.t-badge-style-heading h2 { font-size: 21px; }
.t-badge-style-heading p { color: var(--t-muted); font-size: 12px; margin-top: 5px; }
.t-badge-style-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.t-badge-style-option { position: relative; min-width: 0; margin: 0; cursor: pointer; }
.t-badge-style-choice { display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--t-line); border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.t-badge-style-sample { position: relative; display: flex; align-items: center; justify-content: center; height: 105px; overflow: hidden; background: radial-gradient(#b5c1df60 .7px, transparent .7px),#f1f4fa; background-size: 7px 7px; }
.t-badge-style-sample iframe { position: absolute; top: 50%; left: 50%; width: 260px; height: 106px; border: 0; pointer-events: none; transform: translate(-50%,-50%) scale(var(--sample-scale,.6)); }
.t-style-caption { display: flex; flex-direction: column; gap: 3px; padding: 12px; }
.t-style-caption > strong { font-size: 12px; font-weight: 500; color: var(--t-ink); line-height: 1.4; }
.t-style-caption > small { font-size: 9px; line-height: 1.5; color: var(--t-muted); }
.t-style-selected { position: absolute; top: 7px; right: 7px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--t-primary); color: #fff; font-size: 11px; border: 2px solid #fff; }
.t-badge-style-option input:checked + .t-badge-style-choice { border-color: var(--t-primary); box-shadow: 0 0 0 1px var(--t-primary),0 4px 14px #2e319214; }
.t-badge-style-option input:checked + .t-badge-style-choice .t-style-selected { display: grid; }
.t-badge-style-option:hover .t-badge-style-choice { border-color: #777dc1; box-shadow: 0 4px 16px #20245f13; }
.t-badge-swatch { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 18px); height: 74px; padding: 9px; overflow: hidden; border: 1px solid #dac79f; border-radius: 10px; background: repeating-linear-gradient(125deg,#ffffff50 0 1px,transparent 1px 7px),linear-gradient(125deg,#fffdf7,#eddfbe); color: #423b61; box-shadow: inset 0 0 0 3px #fff9,inset 0 0 0 4px #c7ac7477; }
.t-badge-swatch > span { position: relative; min-width: 0; }
.t-badge-swatch img { display: block; position: relative; flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.t-badge-swatch img { border-radius: 50%; background: #fff; filter: none; outline: 1px solid #fff; outline-offset: 2px; }
.t-badge-swatch-blue img, .t-badge-swatch-dark img { outline: none; outline-offset: 0; }
.t-badge-swatch b { display: block; color: inherit; font-size: 5px; font-weight: 500; line-height: 1.4; letter-spacing: .03em; }
.t-badge-swatch strong { display: block; color: inherit; font-size: 8px; font-weight: 500; line-height: 1.4; margin: 4px 0; }
.t-badge-swatch small { display: block; font-size: 6px; white-space: nowrap; line-height: 1.5; opacity: .8; }
.t-badge-swatch-original { border-radius: 999px; color: #133b67; background: radial-gradient(circle at top right,#ead7ab70,transparent 65%),#f8fbf9; }
.t-badge-swatch-original b { color: #176a43; }
.t-badge-swatch-card { border-color: #c8d1e8; background: linear-gradient(90deg,#e9effb 0 26%,#fff 26%); box-shadow: inset 0 3px #2e3192,inset 0 -12px #f0f3fa; }
.t-badge-swatch-blue { border-color: #bfa870; color: #fff; background: repeating-linear-gradient(45deg,transparent 0 12px,#ffffff0c 12px 13px,transparent 13px 25px),linear-gradient(125deg,#1c236e,#535fd0); box-shadow: inset 0 0 0 3px #ffffff15,inset 0 0 0 4px #d3b97777; }
.t-badge-swatch-dark { border-color: #ab925a; color: #f4e7be; background: radial-gradient(ellipse at top right,#3a416f,transparent),#141b36; box-shadow: inset 0 0 0 3px #ffffff09,inset 0 0 0 4px #bda26555; }
.t-badge-swatch-soft { border-color: #c3d0f3; color: #354b86; background: linear-gradient(145deg,transparent 65%,#d3ddfa 65% 78%,#bdcaef80 78%),linear-gradient(125deg,#fff,#e8eeff); box-shadow: inset 0 0 0 3px #ffffff80; }
.t-badge-autocomplete { z-index: 60; }
.t-badge-autocomplete .t-badge-suggestions { right: auto; width: min(580px,calc(100vw - 96px)); max-height: 435px; padding: 6px; border-radius: 16px; border-color: #c8d2ec; box-shadow: 0 18px 50px #1d285c28,0 2px 8px #1d285c0d; }
.t-suggestions-heading { position: sticky; top: -6px; z-index: 1; padding: 12px 12px 11px; margin: -6px -6px 5px; background: #f5f7fd; color: #3b4874; font-size: 12px; font-weight: 500; border-bottom: 1px solid #e4e9f4; }
.t-suggestions-heading > span { display: block; margin-top: 3px; color: #75809a; font-size: 10px; font-weight: 400; }
.t-badge-autocomplete .t-badge-suggestions button { display: flex; align-items: center; gap: 13px; padding: 12px; border: 0; border-radius: 11px; }
.t-badge-autocomplete .t-badge-suggestions button + button { margin-top: 3px; }
.t-badge-result-photo { display: grid; flex: 0 0 56px; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 11px; background: #e7edf9 url('/img/logo.png') center / 35px no-repeat; border: 1px solid #e0e6f2; }
.t-badge-result-photo img { width: 100%; height: 100%; object-fit: cover; }
.t-badge-result-copy { flex: 1; min-width: 0; }
.t-badge-result-copy > strong { display: block; font-size: 14px; font-weight: 500; color: #20245f; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.t-badge-result-address { display: block; margin-top: 3px; color: #64718c; font-size: 11px; line-height: 1.5; white-space: normal; }
.t-badge-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; color: #7b859a; font-size: 9px; }
.t-badge-result-meta > span { padding: 2px 6px; border-radius: 5px; color: #246347; background: #e9f4ed; }
.t-badge-result-arrow { flex: 0 0 23px; color: #6a78a6; font-size: 18px; }
@media(max-width:767px) {
    .t-badge-autocomplete .t-badge-suggestions { left: -16px; width: calc(100% + 32px); max-height: 390px; }
    .t-badge-autocomplete .t-badge-suggestions button { gap: 9px; padding: 10px 6px; }
    .t-badge-result-photo { flex-basis: 42px; width: 42px; height: 42px; }
    .t-badge-result-copy > strong { font-size: 12px; }
    .t-badge-result-address { font-size: 10px; }
    .t-badge-result-arrow { display: none; }
    .t-badge-styles { padding: 15px; }
    .t-badge-style-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .t-badge-style-sample { height: 85px; }
    .t-style-caption { padding: 10px; }
    .t-style-caption > strong { font-size: 11px; }
    .t-style-caption > small { font-size: 8px; }
    .t-badge-swatch { gap: 5px; padding: 6px; }
    .t-badge-swatch img { width: 24px; height: 24px; flex-basis: 24px; }
    .t-badge-swatch strong { font-size: 6px; }
}
.t-badge-preview-caption { margin: 10px 0 0; color: var(--t-muted); font-size: 11px; text-align: center; }

.t-embed-panel {
    margin-top: 24px;
}
.t-embed-copy { width: 100%; }
.t-embed-details { margin-bottom: 0; }
.t-embed-details .t-code { margin-top: 14px; }

.t-code {
    width: 100%;
    background: #f3f5fc;
    color: #3e4a76;
    border: 1px solid var(--t-line);
    border-radius: 9px;
    padding: 13px;
    font: 11px/1.7 Consolas,monospace!important;
    resize: vertical;
    min-height:115px
}

.t-code-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top:15px
}

.t-code-footer>span {
    color: var(--t-muted);
    font-size:10px
}

.t-code-footer>span i {
    color: var(--t-primary);
    margin-right:5px
}

.t-selected-business {
    margin-top: 12px;
    border: 1px solid #d1d9f3;
    background: var(--t-soft);
    border-radius: 8px;
    padding: 12px;
    font-size:12px
}

.t-autocomplete {
    position:relative
}

.t-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    box-shadow: 0 12px 24px #2e319220;
    border-radius: 9px;
    z-index: 50;
    max-height: 340px;
    overflow: auto;
    margin-top:5px
}

.t-suggestions button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--t-line);
    padding: 11px 13px;
    color: var(--t-ink);
    font-size: 12px!important;
    line-height:1.4
}

.t-suggestions button:hover,.t-suggestions button:focus {
    background:var(--t-soft)
}

.t-suggestions button small {
    display: block;
    color: var(--t-muted);
    margin-top: 4px;
    font-size:10px
}

.t-suggestions-label {
    padding: 7px 12px;
    font-size: 9px;
    color: var(--t-muted);
    background: var(--t-bg);
    letter-spacing: .08em;
    text-transform:uppercase
}

.t-google-attribution {
    padding: 8px 12px;
    font-size: 10px;
    color: var(--t-muted);
    display: flex;
    align-items: center;
    justify-content:flex-end
}

.t-google-attribution img {
    width: 65px;
    height:auto
}

.t-sr-only {
    position: absolute!important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border:0
}

.t-embed-body {
    margin: 0;
    background:transparent
}

.t-widget {
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: 12px;
    overflow: hidden;
    font-size: 13px;
    min-height: 100vh;
    display: flex;
    flex-direction:column
}

.t-widget[data-theme=dark] {
    --t-ink: #eef1ff;
    --t-muted: #b7c1df;
    --t-primary: #abbaff;
    --t-primary-dark: #535fc0;
    --t-soft: #2b3152;
    --t-paper: #1c2340;
    --t-bg: #242b49;
    --t-line:#424c70
}

.t-widget[data-theme=dark] .t-primary {
    background: #464cb3;
    color:#fff
}

.t-widget-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding:20px 20px 14px
}

.t-widget-header h1 {
    font-size:21px
}

.t-widget-header .t-kicker {
    font-size: 9px;
    margin-bottom:6px
}

.t-widget-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding:0 20px 14px
}

.t-widget-filters select {
    width: auto;
    max-width: 70%;
    min-height: 35px;
    padding: 7px 9px;
    font-size:11px!important
}

.t-widget-map {
    height: 300px;
    background: #edf0f8;
    flex-shrink:0
}

.t-widget-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 20px 9px;
    font-size:12px
}

.t-widget-list-heading .t-help {
    margin:0!important
}

.t-widget-results {
    padding: 0 16px 10px;
    max-height: 280px;
    overflow:auto
}

.t-widget .t-business {
    margin:8px 0
}

.t-widget .t-business-content {
    padding:12px
}

.t-widget .t-business h3 {
    font-size:14px!important
}

.t-widget .t-business-actions {
    margin-top:8px
}

.t-widget .t-message {
    margin:12px 16px
}

.t-widget-search {
    padding: 4px 18px 18px;
    flex:1
}

.t-widget-search>.t-autocomplete {
    margin-bottom:12px
}

.t-widget-search .t-widget-results {
    padding: 0;
    max-height: none;
    overflow:visible
}

.t-widget-search .t-widget-list-heading {
    padding:8px 0
}

.t-widget-search .t-input {
    font-size:12px!important
}

.t-widget #lookup-selected {
    margin-top:15px
}

.t-powered {
    border-top: 1px solid var(--t-line);
    padding: 12px 17px;
    margin-top: auto;
    background: var(--t-paper);
    flex-shrink:0
}

.t-powered a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    text-decoration: none;
    color:var(--t-muted)
}

.t-powered strong {
    color: var(--t-ink);
    font-weight:650
}

.t-powered a>span:last-child {
    margin-left:auto
}

.t-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    margin:13px 0 3px
}

.t-pagination button {
    background: var(--t-soft);
    border: 1px solid var(--t-line);
    border-radius: 6px;
    color: var(--t-ink);
    padding: 7px 12px;
    font-size:11px!important
}

.t-empty-state {
    padding: 24px;
    text-align: center;
    color: var(--t-muted);
    font-size:12px
}

.t-map-popup {
    max-width: 230px;
    color: #20245f;
    font:12px/1.5 "Segoe UI",Arial,sans-serif
}

.t-map-popup strong {
    font-size: 14px;
    display:block
}

.t-map-popup button,.t-map-popup a {
    display: inline-block;
    border: 0;
    background: #2e3192;
    color: #fff!important;
    padding: 7px 10px;
    border-radius: 6px;
    margin-top: 8px;
    text-decoration: none;
    font-size:11px
}

.t-widget:fullscreen {
    overflow: auto;
    border-radius:0
}

.t-widget:fullscreen .t-widget-map {
    height:60vh
}

.t-map-error {
    padding: 30px;
    text-align: center;
    color: #5e6a91;
    background: #edf1fb;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size:13px
}

.t-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: t-spin .8s linear infinite;
    margin-right: 6px;
    vertical-align:middle
}

@keyframes t-spin {
    to {
        transform:rotate(360deg)
    }
}

@media(min-width:1100px) {
    .t-trip-settings {
        position: sticky;
        top:100px
    }
}

@media(max-width:1050px) {
    .tools-hero-home h1 {
        font-size:32px
    }
    .t-workspace,.t-builder {
        grid-template-columns: 285px minmax(0,1fr);
        gap:18px
    }
    .t-panel {
        padding:20px
    }
    .t-trip-map-panel {
        padding:0
    }
    .t-stop-options {
        grid-template-columns:1fr
    }
    .t-trip-empty h2 {
        font-size:29px
    }
    .t-empty-features {
        gap:15px
    }
    .t-preview-stage {
        padding:16px
    }
    .t-code-footer {
        flex-wrap:wrap
    }
    .t-navigation-panel {
        flex-wrap:wrap
    }
}

@media(min-width:768px) and (max-width:991px) {
    .tools-hero-grid { grid-template-columns: minmax(0,1fr) 320px; gap:22px; }
    .tools-hero-previews { gap:10px; }
    .tools-preview-card img { height:82px; }
    .tools-preview-card > span { font-size:9px; padding:0; }
}

@media(max-width:767px) {
    .tools-hero {
        padding:22px 0 30px
    }
    .tools-hero-grid {
        grid-template-columns: 1fr;
        gap:18px
    }
    .tools-hero h1 {
        font-size:34px
    }
    .tools-hero p {
        font-size:14px
    }
    .tools-hero-home h1 {
        font-size:30px
    }
    .tools-hero-previews {
        width: 100%;
        max-width:420px
    }
    .tools-preview-card img {
        height:74px
    }
    .tools-preview-card > span {
        font-size:10px
    }
    .tools-nav .tools-wrap {
        gap:23px
    }
    .tools-nav a {
        font-size: 12px;
        padding-top:14px
    }
    .tools-body {
        padding-top:24px
    }
    .tools-card-grid {
        grid-template-columns: 1fr;
        gap:12px
    }
    .tools-bottom-note {
        align-items: start;
        flex-wrap: wrap;
        padding: 22px;
        gap:15px
    }
    .tools-bottom-note a {
        margin-left:0
    }
    .t-section-heading {
        display:block
    }
    .t-section-heading p {
        margin-top:12px
    }
    .t-workspace,.t-builder {
        grid-template-columns:1fr
    }
    .t-trip-empty {
        min-height: 420px;
        padding:32px 22px
    }
    .t-trip-empty h2 {
        font-size:29px
    }
    .t-route-summary {
        flex-wrap:wrap
    }
    .t-stop-options {
        grid-template-columns:1fr 1fr
    }
    .t-stop {
        padding-left: 19px;
        margin-left:12px
    }
    .t-business-photo {
        height:90px
    }
    .t-business-content {
        padding:12px
    }
    .t-stop-heading {
        flex-wrap: wrap;
        gap:6px
    }
    .t-map {
        height:280px
    }
    .t-preview-heading h2 {
        font-size:21px
    }
    .t-preview-heading .t-view-switch button {
        font-size: 10px!important;
        padding:7px 8px
    }
    .t-preview-stage {
        padding:12px
    }
    .t-trip-main[data-view=map] .t-map {
        height:430px
    }
    .t-empty-features {
        gap:20px
    }
    .t-dialog {
        padding:25px
    }
    .t-widget-map {
        height:270px
    }
    .t-widget-header {
        padding:16px
    }
    .t-widget-header h1 {
        font-size:18px
    }
    .t-widget-filters {
        padding:0 16px 12px
    }
    .t-widget-list-heading {
        padding:12px 16px 7px
    }
    .t-powered {
        padding:10px 12px
    }
}

@media(max-width:420px) {
    .t-stop-options {
        grid-template-columns:1fr
    }
    .t-field-pair {
        gap:9px
    }
    .t-stop-heading h3 {
        font-size:19px
    }
    .t-trip-main[data-view=list] .t-business {
        grid-template-columns:1fr
    }
    .t-trip-main[data-view=list] .t-business-photo,.t-trip-main[data-view=list] .t-business-fallback {
        height: 90px;
        min-height:0
    }
    .t-empty-features {
        gap:13px
    }
    .t-code-footer .t-button {
        width:100%
    }
}

@media(prefers-reduced-motion:reduce) {
    .hms-tools * {
        scroll-behavior: auto!important;
        transition: none!important;
        animation:none!important
    }
    .tools-card:hover,.tools-card:focus-visible,.tools-hero .tools-preview-card:hover {
        transform:none
    }
}

/* Dialogs remain hidden until opened. */
.hms-tools .t-dialog:not([open]) {
    display:none
}

.hms-tools.t-widget-expanded {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    grid-template-rows:auto auto auto minmax(0,1fr) auto auto
}

.t-widget-expanded .t-widget-header,.t-widget-expanded .t-widget-filters {
    grid-column:1 / -1
}

.hms-tools.t-widget-expanded .t-widget-map {
    grid-column: 1;
    grid-row: 3 / 5;
    height: 100%;
    min-height:0
}

.t-widget-expanded .t-widget-list-heading {
    grid-column: 2;
    grid-row: 3;
    flex-wrap:wrap
}

.t-widget-expanded .t-widget-results {
    grid-column: 2;
    grid-row:4
}

.t-widget-expanded .t-message {
    grid-column: 1 / -1;
    grid-row:5
}

.t-widget-expanded .t-powered {
    grid-column: 1 / -1;
    grid-row:6
}

@media(max-width:767px) {
    .hms-tools.t-widget-expanded {
        display:flex
    }
    .hms-tools.t-widget-expanded .t-widget-map {
        height:40vh
    }
}

.t-mobile-jumps {
    display:none
}

@media(max-width:767px) {
    .t-mobile-jumps {
        display: flex;
        gap: 15px;
        font-size: 12px;
        margin-bottom:20px
    }
    .t-mobile-jumps a {
        color: var(--t-primary);
        text-decoration:underline
    }
}

.hms-tools.t-widget {
    height: 100vh;
    min-height:0
}

.t-widget .t-widget-results {
    flex: 1;
    min-height: 0;
    max-height:none
}

.t-widget .t-widget-search {
    min-height: 0;
    overflow:auto
}

.t-widget .t-suggestions {
    max-height:230px
}