:root {
        --n: #364b54;
        --g: #eb6b40;
        --s: #e8e6df;
        --c: #f6f5f2;
        --slab: "Barlow Condensed", Arial, sans-serif;
        --sans: "Barlow Condensed", Arial, sans-serif;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--c);
        color: var(--n);
        font-family: var(--sans);
      }
      button,
      input,
      select,
      textarea {
        font: inherit;
      }
      button {
        cursor: pointer;
      }
      .ui-icon {
        display: inline-block;
        width: 1.15em;
        height: 1.15em;
        flex: 0 0 auto;
        vertical-align: -0.18em;
        background-color: currentColor;
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
      }
      .icon-heart { --icon: url("icons/lucide/heart.svg"); }
      .icon-share { --icon: url("icons/lucide/share-2.svg"); }
      .icon-list { --icon: url("icons/lucide/list.svg"); }
      .icon-map { --icon: url("icons/lucide/map.svg"); }
      .icon-map-pin { --icon: url("icons/lucide/map-pin.svg"); }
      .icon-calendar-days { --icon: url("icons/lucide/calendar-days.svg"); }
      .icon-calendar { --icon: url("icons/lucide/calendar.svg"); }
      .icon-refresh { --icon: url("icons/lucide/refresh-cw.svg"); }
      .icon-message { --icon: url("icons/lucide/message-circle.svg"); }
      .icon-chevron-left { --icon: url("icons/lucide/chevron-left.svg"); }
      .icon-chevron-right { --icon: url("icons/lucide/chevron-right.svg"); }
      .icon-arrow-left { --icon: url("icons/lucide/arrow-left.svg"); }
      .icon-arrow-right { --icon: url("icons/lucide/arrow-right.svg"); }
      .icon-plus { --icon: url("icons/lucide/plus.svg"); }
      .icon-minus { --icon: url("icons/lucide/minus.svg"); }
      .icon-x { --icon: url("icons/lucide/x.svg"); }
      .icon-send { --icon: url("icons/lucide/send.svg"); }
      .icon-sparkles { --icon: url("icons/lucide/sparkles.svg"); }
      .icon-pencil { --icon: url("icons/lucide/pencil.svg"); }
      .icon-sun { --icon: url("icons/lucide/sun.svg"); }
      .hide {
        display: none !important;
      }
      .site-intro {
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        color: #fff;
        background:
          linear-gradient(rgba(7, 28, 39, .14), rgba(7, 28, 39, .36)),
          url("assets/zion.jpg") center / cover;
      }
      .site-intro-nav {
        position: relative;
        z-index: 2;
        min-height: 150px;
        padding: 22px clamp(24px, 3vw, 58px);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        text-shadow: 0 2px 12px rgba(0,0,0,.3);
      }
      .site-intro-links {
        display: flex;
        gap: clamp(22px, 2.5vw, 46px);
        padding-top: 24px;
        font: 700 clamp(12px, 1vw, 18px) var(--slab);
        letter-spacing: .08em;
        text-transform: lowercase;
      }
      .site-intro-links button,
      .things-nav button {
        border: 0;
        padding: 0;
        background: none;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
      }
      .site-intro-links button:hover,
      .site-intro-links button:focus-visible { color: #c3d766; }
      .site-intro-logo { width: clamp(205px, 21vw, 385px); }
      .site-intro-tools {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 22px;
        padding-top: 19px;
      }
      .intro-sun {
        width: 34px;
        height: 34px;
      }
      .intro-search {
        width: 25px;
        height: 25px;
        border: 3px solid currentColor;
        border-radius: 50%;
        position: relative;
      }
      .intro-search::after {
        content: "";
        position: absolute;
        width: 11px;
        height: 3px;
        right: -8px;
        bottom: -5px;
        transform: rotate(48deg);
        background: currentColor;
      }
      .intro-menu-label { font: 700 16px var(--slab); text-transform: lowercase; }
      .intro-menu-lines,
      .intro-menu-lines::before,
      .intro-menu-lines::after {
        display: block;
        width: 34px;
        height: 3px;
        background: currentColor;
      }
      .intro-menu-lines { position: relative; }
      .intro-menu-lines::before,
      .intro-menu-lines::after { content: ""; position: absolute; left: 0; }
      .intro-menu-lines::before { top: -10px; }
      .intro-menu-lines::after { top: 10px; }
      .site-intro-content {
        position: relative;
        z-index: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 24px 150px;
        text-align: center;
      }
      .site-intro-content h1 {
        margin: 0 0 24px;
        font-family:  sans-serif;
        font-style: normal;
        font-weight: 900;
        font-size: clamp(38px, calc(5.125vw + 21.6px), 120px);
        line-height: .95;
        letter-spacing: -.025em;
        text-transform: uppercase;
        text-shadow: 0 7px 30px rgba(0,0,0,.42);
      }
      .site-intro-learn {
        margin-bottom: 18px;
        min-width: 140px;
        padding: .8125rem 1.5rem;
        border: 0;
        border-radius: 999px;
        background: var(--g);
        color: #fff;
        font-family:  serif;
        font-style: normal;
        font-weight: 700;
        font-size: clamp(13px, calc(.313vw + 12px), 18px);
        line-height: 1.1;
        letter-spacing: .025em;
        text-transform: lowercase;
      }
      .site-intro-start {
        padding: 17px 28px;
        border: 2px solid #fff;
        background: rgba(13,47,69,.9);
        color: #fff;
        box-shadow: 0 12px 32px rgba(0,0,0,.3);
        font: 700 clamp(12px, 1vw, 16px) var(--slab);
        letter-spacing: .08em;
      }
      .site-intro-start:hover,
      .site-intro-start:focus-visible { background: var(--g); }
      .site-intro-summary {
        position: absolute;
        z-index: 2;
        left: clamp(24px, 3vw, 56px);
        right: clamp(24px, 12vw, 230px);
        bottom: 34px;
        margin: 0;
        font-family: var(--sans);
        font-style: normal;
        font-weight: 400;
        font-size: clamp(14px, calc(.25vw + 13.2px), 18px);
        line-height: 1.6;
        letter-spacing: -.025em;
        text-shadow: 0 2px 12px #000;
      }
      .things-page { min-height: 100vh; background: #e5e5e1; }
      .things-header {
        min-height: 116px;
        padding: 0 clamp(28px, 3vw, 56px);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        background: #fff;
        box-shadow: 0 3px 9px rgba(13,47,69,.15);
      }
      .things-nav {
        display: flex;
        gap: clamp(24px, 2.3vw, 44px);
        color: var(--n);
        font: 700 clamp(12px, 1vw, 18px) var(--slab);
        letter-spacing: .08em;
        text-transform: lowercase;
      }
      .things-home { border: 0; padding: 0; background: none; }
      .things-logo { width: clamp(160px, 14vw, 245px); }
      .things-tools {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 20px;
        color: var(--n);
      }
      .things-content { padding: 60px clamp(24px, 8vw, 160px) 90px; }
      .things-heading { max-width: 1100px; margin: 0 auto 38px; text-align: center; }
      .things-heading .kicker { margin-bottom: 9px; }
      .things-heading h1 {
        margin: 0 0 12px;
        font: 900 clamp(38px, 5vw, 70px) / .95  sans-serif;
        letter-spacing: -.025em;
      }
      .things-heading p { margin: 0; color: #61747f; font-size: 17px; line-height: 1.5; }
      .attraction-grid {
        width: min(1320px, 100%);
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }
      .attraction-card {
        height: 220px;
        min-height: 0;
        display: grid;
        grid-template-columns: 40% 1fr;
        overflow: hidden;
        border: 3px solid #fff;
        border-radius: 24px;
        background: #efefec;
      }
      .attraction-media { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
      .attraction-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      .attraction-badges {
        position: absolute;
        top: 0;
        left: 0;
        width: 68px;
        min-height: 124px;
        padding: 18px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-radius: 0 0 28px 0;
        background: var(--g);
        color: #fff;
        font-size: 24px;
      }
      .attraction-heart {
        width: 34px;
        height: 34px;
        padding: 4px;
        border: 0;
        background: transparent;
        color: #fff;
      }
      .attraction-badges svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
      .attraction-heart.is-selected svg { fill: #fff; }
      .attraction-pin { width: 27px !important; height: 27px !important; flex: 0 0 auto; }
      .attraction-heart:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
      .attraction-info { min-height: 0; padding: 18px 24px 16px; display: flex; flex-direction: column; align-items: flex-start; }
      .attraction-info h2 {
        margin: 0 0 8px;
        font: 900 clamp(18px, 1.35vw, 25px) / 1  sans-serif;
        letter-spacing: -.02em;
        text-transform: uppercase;
      }
      .attraction-info p { margin: 0 0 5px; color: #29485b; font-size: 14px; line-height: 1.3; }
      .attraction-info strong { font-size: 14px; line-height: 1.2; }
      .attraction-actions { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 20px; }
      .attraction-actions a,
      .attraction-actions button {
        color: var(--n);
        font: 700 13px  var(--slab);
        letter-spacing: .025em;
        text-decoration: none;
      }
      .attraction-actions .attraction-learn { padding: 10px 21px; border-radius: 999px; background: var(--n); color: #fff; }
      .attraction-actions .attraction-add {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 17px;
        border: 0;
        border-radius: 999px;
        background: var(--g);
        color: #fff;
        white-space: nowrap;
      }
      .attraction-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }
      .attraction-add.is-added { background: #eb6b40; }
      .things-planner-cta {
        display: none;
        position: fixed;
        right: 26px;
        bottom: 24px;
        z-index: 5;
        padding: 16px 24px;
        border: 0;
        border-radius: 999px;
        background: var(--g);
        color: #fff;
        box-shadow: 0 8px 24px rgba(13,47,69,.25);
        font: 700 13px  var(--slab);
        letter-spacing: .06em;
      }
      .things-planner-cta.is-visible { display: inline-flex; align-items: center; gap: 8px; }
      .top {
        height: 86px;
        padding: 0 5vw;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #d6ddd8;
      }
      .top nav {
        display: flex;
        gap: 22px;
        font: 700 11px var(--slab);
      }
      .logo {
        font:
          900 40px Georgia,
          serif;
        letter-spacing: -0.08em;
      }
      .logo small {
        font: 700 7px var(--sans);
        letter-spacing: 0.1em;
        margin-right: 2px;
      }
      .tools {
        justify-self: end;
        font: 700 12px var(--slab);
      }
      .hero {
        min-height: 330px;
        padding: 54px 7vw 45px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        background:
          linear-gradient(90deg, #061c2af2, #061c2a75),
          url("assets/zion.jpg")
            center/cover;
        color: #fff;
      }
      .kicker {
        font: 700 10px var(--slab);
        letter-spacing: 0.17em;
        color: #eb6b40;
        margin: 0 0 11px;
      }
      .hero h1,
      .triphead h1 {
        font: 900 clamp(48px, 6vw, 82px) / 0.83 var(--sans);
        letter-spacing: -0.055em;
        margin: 0 0 20px;
      }
      .hero h1 span,
      .triphead h1 span {
        color: #eb6b40;
      }
      .hero p:last-child {
        max-width: 620px;
        line-height: 1.55;
      }
      .badge {
        text-align: right;
        font: 900 23px/1.1 var(--sans);
      }
      .badge b {
        font-size: 36px;
        color: #efac83;
      }
      .builder {
        width: min(1200px, 92vw);
        margin: 0 auto 70px;
        display: grid;
        grid-template-columns: 255px 1fr;
        background: #fff;
        box-shadow: 0 22px 60px #364b5420;
      }
      .steps {
        padding: 28px;
        background: var(--n);
        color: #fff;
        display: flex;
        flex-direction: column;
      }
      .step {
        padding: 16px 0;
        display: flex;
        gap: 13px;
        align-items: center;
        border-top: 1px solid #ffffff25;
        color: #8094a0;
      }
      .step:last-of-type {
        border-bottom: 1px solid #ffffff25;
      }
      .step b {
        width: clamp(36px, 2.6vw, 46px);
        height: clamp(36px, 2.6vw, 46px);
        min-width: clamp(36px, 2.6vw, 46px);
        flex: 0 0 clamp(36px, 2.6vw, 46px);
        aspect-ratio: 1 / 1;
        border: 1px solid;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font: 700 clamp(12px, 0.82vw, 17px) var(--slab);
      }
      .step span {
        font: 700 clamp(12px, 0.82vw, 17px) var(--slab);
        letter-spacing: 0.13em;
      }
      .step.active {
        color: #fff;
      }
      .step.active b {
        background: var(--g);
        border-color: var(--g);
      }
      .step.done {
        color: #efac83;
      }
      .steps p {
        margin: auto 0 0;
        font-size: 12px;
        line-height: 1.6;
        color: #aab7bd;
      }
      .form {
        padding: 38px 50px 30px;
        min-height: 530px;
        display: flex;
        flex-direction: column;
      }
      .form h2,
      .schedule h2 {
        font: 900 clamp(34px, 4vw, 52px) / 0.9 var(--sans);
        letter-spacing: -0.045em;
        margin: 0 0 12px;
      }
      .sub {
        color: #667984;
        margin: 0 0 24px;
      }
      .choices {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }
      .choice {
        height: 112px;
        padding: 15px;
        border: 1px solid #d6ddd8;
        background: #fafaf7;
        color: var(--n);
        text-align: left;
        position: relative;
      }
      .choice i {
        display: block;
        font-size: 27px;
        font-style: normal;
        margin-bottom: 13px;
      }
      .choice span {
        font: 700 10px var(--slab);
      }
      .choice.on {
        border-color: var(--g);
        box-shadow: inset 0 -4px var(--g);
        background: #faf0e8;
      }
      .choice.on:after {
        content: "THIS";
        position: absolute;
        right: 8px;
        top: 8px;
        font: 700 11px var(--slab);
        letter-spacing: 0.04em;
      }
      .dates,
      .people {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 20px;
      }
      .people {
        width: 50%;
      }
      .people > .field {
        font: 700 11px var(--slab);
      }
      .field {
        font: 700 9px var(--slab);
        letter-spacing: 0.13em;
      }
      .field input,
      .field select,
      .field textarea {
        display: block;
        width: 100%;
        margin-top: 9px;
        padding: 16px;
        border: 1px solid #ccd4ce;
        background: #fff;
        color: var(--n);
      }
      .date-field {
        position: relative;
      }
      .date-toggle {
        width: 100%;
        min-height: 64px;
        margin-top: 9px;
        padding: 16px 18px;
        border: 1px solid #ccd4ce;
        background: #fff;
        color: var(--n);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font: 700 16px var(--slab);
        text-align: left;
        cursor: pointer;
      }
      .date-toggle::after {
        content: "";
        display: block;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        background-color: currentColor;
        -webkit-mask: url("icons/lucide/calendar.svg") center / contain no-repeat;
        mask: url("icons/lucide/calendar.svg") center / contain no-repeat;
        color: var(--g);
      }
      .calendar {
        position: absolute;
        z-index: 20;
        top: calc(100% + 8px);
        left: 0;
        width: min(340px, 100%);
        padding: 18px;
        border: 1px solid #bcc7c0;
        background: #fff;
        box-shadow: 0 18px 42px rgba(7, 31, 44, 0.2);
      }
      .calendar.hide {
        display: none;
      }
      .calendar-head {
        display: grid;
        grid-template-columns: 38px 1fr 38px;
        align-items: center;
        margin-bottom: 14px;
      }
      .calendar-head strong {
        text-align: center;
        font: 700 15px var(--slab);
      }
      .calendar-head button {
        width: 36px;
        height: 36px;
        border: 1px solid #ccd4ce;
        background: #f5f7ef;
        color: var(--n);
        font-size: 18px;
        cursor: pointer;
      }
      .calendar-weekdays,
      .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
      }
      .calendar-weekdays span {
        padding: 4px 0 8px;
        color: #71818a;
        font: 700 8px var(--slab);
        text-align: center;
      }
      .calendar-days button,
      .calendar-days span {
        aspect-ratio: 1;
      }
      .calendar-days button {
        border: 0;
        background: #f5f7f3;
        color: var(--n);
        font: 700 11px var(--slab);
        cursor: pointer;
      }
      .calendar-days button:hover,
      .calendar-days button:focus-visible {
        background: #f3d5c0;
      }
      .calendar-days button.selected {
        background: var(--g);
        color: #fff;
      }
      .guest-control {
        min-height: 64px;
        margin-top: 9px;
        padding: 8px;
        border: 1px solid #ccd4ce;
        background: #fff;
        display: grid;
        grid-template-columns: 48px 1fr 48px;
        align-items: center;
      }
      .guest-control button {
        width: 44px;
        height: 44px;
        border: 1px solid var(--g);
        border-radius: 50%;
        background: #fff;
        color: var(--n);
        font: 700 22px var(--sans);
        cursor: pointer;
      }
      .guest-control button:hover,
      .guest-control button:focus-visible {
        background: var(--g);
        color: #fff;
      }
      .guest-count {
        color: var(--n);
        font: 700 16px var(--slab);
        text-align: center;
      }
      .pace {
        margin-top: 25px;
        padding: 24px;
        background: var(--s);
        display: grid;
        grid-template-columns: 1fr repeat(3, auto);
        gap: 8px;
        align-items: center;
      }
      .pace b {
        font: 700 9px var(--slab);
      }
      .pace button {
        padding: 11px;
        border: 1px solid #b9c1bb;
        background: #fff;
        font: 700 8px var(--slab);
      }
      .pace button.on {
        background: var(--n);
        color: #fff;
      }
      .date-mode {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 8px 0 24px;
      }
      .date-mode button {
        min-height: 54px;
        border: 1px solid #ccd4ce;
        background: #fff;
        color: var(--n);
        font: 700 11px var(--slab);
      }
      .date-mode button + button { border-left: 0; }
      .date-mode button.on { background: var(--n); color: #fff; }
      .flexible-dates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .flexible-dates .field select {
        min-height: 64px;
        font: 700 16px var(--slab);
      }
      .flexible-dates.hide { display: none; }
      .stay-warning {
        margin-top: 18px;
        padding: 16px 18px;
        border-left: 5px solid var(--g);
        background: #f2f4ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        color: var(--n);
        box-shadow: 0 10px 24px rgba(7, 31, 44, 0.1);
      }
      .stay-warning.hide {
        display: none;
      }
      .stay-warning p {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
      }
      .stay-warning button {
        flex: 0 0 auto;
        border: 0;
        border-radius: 999px;
        padding: 12px 18px;
        background: var(--g);
        color: #fff;
        font: 700 10px var(--slab);
        letter-spacing: 0.08em;
        cursor: pointer;
      }
      .stay-warning button:hover,
      .stay-warning button:focus-visible {
        background: var(--n);
      }
      .note {
        margin-top: 20px;
      }
      .note textarea {
        min-height: 95px;
      }
      .navrow {
        margin-top: auto;
        padding-top: 24px;
        border-top: 1px solid #dfe4df;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }
      .navrow button {
        padding: 14px 21px;
        border: 0;
        font: 700 clamp(12px, 0.82vw, 17px) var(--slab);
        letter-spacing: 0.08em;
      }
      .back {
        background: transparent;
        color: var(--n);
      }
      .next {
        border-radius: 999px !important;
        background: var(--g);
        color: #fff;
      }
      .triphead {
        padding: 24px 6vw 20px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        background: var(--n);
        color: #fff;
      }
      .triphead h1 {
        margin-bottom: 10px;
        font-size: clamp(20px, 4vw, 56px);
        line-height: 0.95;
        white-space: nowrap;
      }
      .triphead p:last-child {
        margin: 0;
        color: #c2ced3;
      }
      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .actions button {
        padding: 11px 14px;
        border: 1px solid #ffffff55;
        background: transparent;
        color: #fff;
        font: 700 9px var(--slab);
      }
      .actions .end-demo-button {
        border-color: #eb6b40;
        background: #eb6b40;
        color: var(--n);
      }
      .demo-end {
        min-height: 100vh;
        padding: 28px clamp(22px, 6vw, 90px) 38px;
        display: flex;
        flex-direction: column;
        color: #fff;
        background: linear-gradient(rgba(4, 19, 29, .88), rgba(4, 19, 29, .94)), url("assets/zion.jpg") center / cover fixed;
      }
      .demo-end-top {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
      }
      .demo-end-logo {
        width: 170px;
      }
      .demo-end-back {
        justify-self: start;
        padding: 12px 17px;
        border: 1px solid rgba(255,255,255,.5);
        background: rgba(0,0,0,.16);
        color: #fff;
        font: 700 10px var(--slab);
        letter-spacing: .08em;
      }
      .demo-end-intro {
        max-width: 980px;
        margin: clamp(38px, 7vh, 80px) auto clamp(35px, 7vh, 74px);
        text-align: center;
      }
      .demo-end-intro h1 {
        margin: 12px 0 18px;
        font: 900 clamp(42px, 5.6vw, 78px) / .94 var(--sans);
        letter-spacing: -.05em;
      }
      .demo-end-intro h1 span { color: #eb6b40; }
      .demo-end-intro > p:last-child {
        max-width: 760px;
        margin: auto;
        color: #d2dce1;
        font-size: clamp(15px, 1.25vw, 19px);
        line-height: 1.5;
      }
      .benefit-grid {
        width: min(1280px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
      }
      .benefit-card {
        min-height: 205px;
        padding: 26px 24px;
        border: 1px solid rgba(255,255,255,.26);
        background: rgba(255,255,255,.07);
        backdrop-filter: blur(6px);
      }
      .benefit-card small {
        color: #eb6b40;
        font: 700 11px var(--slab);
        letter-spacing: .14em;
      }
      .benefit-card h2 {
        margin: 20px 0 10px;
        font: 900 clamp(19px, 1.6vw, 25px) / 1 var(--sans);
      }
      .benefit-card p {
        margin: 0;
        color: #d2d7da;
        font-size: 14px;
        line-height: 1.5;
      }
      .demo-restart {
        align-self: center;
        margin-top: auto;
        transform: translateY(12px);
        padding: 16px 27px;
        border: 0;
        background: #eb6b40;
        color: var(--n);
        font: 700 12px var(--slab);
        letter-spacing: .08em;
      }
      .tabs {
        display: flex;
        padding: 0;
        background: #fff;
        border: 1px solid #ccd5ce;
        overflow-x: auto;
      }
      .tabs button {
        min-width: 185px;
        padding: 17px;
        text-align: left;
        border: 0;
        border-bottom: 4px solid transparent;
        background: #fff;
        color: #758791;
      }
      .tabs b,
      .tabs span {
        display: block;
      }
      .tabs b {
        font: 700 12px var(--slab);
        color: var(--n);
        margin-bottom: 5px;
      }
      .tabs span {
        font-size: 9px;
      }
      .tabs button.on {
        border-bottom-color: var(--g);
        background: #faf0e8;
      }
      .trip-view-switcher {
        width: min(1200px, 92vw);
        margin: 24px auto 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid #ccd5ce;
        background: #fff;
      }
      .trip-view-switcher button {
        min-height: 50px;
        border: 0;
        background: #fff;
        color: var(--n);
        font: 700 11px var(--slab);
        letter-spacing: 0.08em;
      }
      .trip-view-switcher button + button {
        border-left: 1px solid #ccd5ce;
      }
      .trip-view-switcher button.on {
        background: var(--n);
        color: #fff;
      }
      .tripgrid {
        width: min(1200px, 92vw);
        margin: 27px auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 18px;
      }
      .schedule-shell {
        min-width: 0;
        position: relative;
      }
      .tabs-more,
      .tabs-back {
        position: absolute;
        z-index: 4;
        top: 1px;
        width: 58px;
        height: 67px;
        border: 0;
        color: var(--g);
        font: 900 28px/1 var(--sans);
        cursor: pointer;
        transition: opacity .2s ease;
      }
      .tabs-more {
        right: 1px;
        border-left: 1px solid #d7ddd8;
        background: linear-gradient(90deg, rgba(255,255,255,.35), #fff 38%);
      }
      .tabs-back {
        left: 1px;
        border-right: 1px solid #d7ddd8;
        background: linear-gradient(270deg, rgba(255,255,255,.35), #fff 38%);
      }
      .tabs-more.is-hidden,
      .tabs-back.is-hidden {
        opacity: 0;
        pointer-events: none;
      }
      .schedule-shell .schedule {
        border-top: 0;
      }
      .map-view,
      .calendar-itinerary-view {
        width: min(1200px, 92vw);
        margin: 27px auto;
        background: #fff;
        border: 1px solid #d4dcd6;
      }
      .region-map {
        min-height: 620px;
        position: relative;
        overflow: hidden;
        background: #d7dfd8 url("assets/zion.jpg") center / cover no-repeat;
      }
      .map-detail {
        position: absolute;
        z-index: 2;
        left: 24px;
        top: 24px;
        width: min(330px, calc(100% - 48px));
        padding: 24px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #c9d2cc;
        box-shadow: 0 14px 35px rgba(7, 31, 44, 0.18);
      }
      .map-detail h2 {
        margin: 5px 0 8px;
        font: 900 27px/0.95 var(--sans);
      }
      .map-detail > p:last-of-type {
        margin: 0 0 16px;
        color: #667984;
        font-size: 12px;
      }
      .map-stop-list {
        display: grid;
        gap: 8px;
      }
      .map-stop {
        display: grid;
        grid-template-columns: 26px 1fr;
        gap: 9px;
        align-items: center;
        font: 700 10px var(--slab);
      }
      .map-stop b {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--g);
        color: #fff;
      }
      .calendar-itinerary-view {
        padding: 26px;
        overflow-x: auto;
      }
      .itinerary-calendar-grid {
        min-width: 860px;
        display: grid;
        grid-template-columns: 72px repeat(3, minmax(220px, 1fr));
      }
      .itinerary-cal-head {
        min-height: 64px;
        padding: 14px;
        border-bottom: 2px solid var(--n);
        font: 700 13px var(--slab);
      }
      .itinerary-cal-head span {
        display: block;
        margin-top: 4px;
        color: #70818a;
        font: 400 10px var(--sans);
      }
      .itinerary-cal-time {
        min-height: 100px;
        padding: 12px 8px 0 0;
        border-right: 1px solid #d8dfda;
        border-bottom: 1px solid #e2e7e3;
        color: #72818a;
        font: 700 9px var(--slab);
        text-align: right;
      }
      .itinerary-cal-cell {
        min-height: 100px;
        padding: 8px;
        border-right: 1px solid #d8dfda;
        border-bottom: 1px solid #e2e7e3;
      }
      .itinerary-event {
        padding: 10px;
        border-left: 4px solid var(--g);
        background: #faf0e8;
        color: var(--n);
        font: 700 11px/1.35 var(--slab);
      }
      .itinerary-event + .itinerary-event {
        margin-top: 6px;
      }
      .itinerary-event small {
        display: block;
        margin-bottom: 3px;
        color: #647680;
        font: 700 8px var(--slab);
      }
      .schedule,
      .summary {
        background: #fff;
        border: 1px solid #d4dcd6;
      }
      .schedule header {
        padding: 27px 30px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #d6ddd8;
      }
      .schedule > header {
        display: none;
      }
      .schedule h2 {
        font-size: 37px;
      }
      .schedule header p:last-child {
        margin: 0;
        color: #6c7c85;
      }
      .weather {
        font: 900 36px var(--sans);
      }
      .weather small {
        display: block;
        font: 700 8px var(--slab);
        color: var(--g);
      }
      .stop {
        padding: 24px 28px;
        display: grid;
        grid-template-columns: 80px 32px 1fr;
      }
      .stop + .stop {
        border-top: 1px solid #e1e5e2;
      }
      .stop time {
        font: 700 9px var(--slab);
      }
      .marker i {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--g);
        color: #fff;
        font: 700 9px var(--slab);
        font-style: normal;
      }
      .stop h3 {
        font: 700 19px var(--slab);
        margin: 0 0 7px;
      }
      .stop p {
        color: #687984;
        line-height: 1.5;
        margin: 0 0 12px;
      }
      .tag {
        padding: 5px 8px;
        border: 1px solid #cbd4cd;
        border-radius: 999px;
        font: 700 8px var(--slab);
      }
      .stop-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .book-now {
        border: 0;
        border-radius: 999px;
        padding: 9px 15px;
        background: var(--g);
        color: #fff;
        font: 700 10px var(--slab);
        letter-spacing: 0.08em;
        cursor: pointer;
      }
      .book-now:hover,
      .book-now:focus-visible {
        background: var(--n);
      }
      .swap {
        float: right;
        border: 0;
        background: none;
        color: var(--g);
        font: 700 10px var(--slab);
      }
      .swap-mobile {
        display: none;
      }
      .mobile-actions {
        display: contents;
      }
      .side {
        display: flex;
        flex-direction: column;
        gap: 17px;
      }
      .summary {
        padding: 24px;
      }
      .summary h3 {
        font: 900 29px var(--sans);
        margin: 0 0 15px;
      }
      .summary div {
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #d9ded9;
        font-size: 12px;
      }
      .summary span {
        color: #72818a;
      }
      .photo {
        height: 250px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        color: #fff;
        background:
          linear-gradient(#364b5433, #364b54dc),
          url("assets/zion.jpg")
            center/cover;
      }
      .photo small {
        color: #bed763;
        font: 700 9px var(--slab);
      }
      .photo b {
        font: 900 24px/0.95 var(--sans);
      }
      .chatbtn {
        position: fixed;
        right: 22px;
        bottom: 20px;
        padding: 14px 19px;
        border: 0;
        border-radius: 999px;
        background: var(--g);
        color: #fff;
        font: 700 9px var(--slab);
      }
      @media (min-width: 521px) {
        .chatbtn {
          padding: 17px 24px;
          font-size: 10px;
          letter-spacing: .08em;
        }
      }
      .chat {
        position: fixed;
        right: 22px;
        bottom: 76px;
        width: min(370px, calc(100vw - 30px));
        height: 455px;
        background: #fff;
        box-shadow: 0 20px 60px #09253755;
        display: flex;
        flex-direction: column;
      }
      .chat header {
        padding: 19px;
        background: var(--n);
        color: #fff;
      }
      .chat header button {
        float: right;
        border: 0;
        background: none;
        color: #fff;
        font-size: 22px;
      }
      .chat h3 {
        font: 900 22px var(--sans);
        margin: 7px 0 0;
      }
      .messages {
        padding: 16px;
        overflow: auto;
        flex: 1;
      }
      .bubble {
        max-width: 88%;
        padding: 11px;
        background: var(--s);
        font-size: 12px;
        line-height: 1.5;
      }
      .bubble.user {
        margin-left: auto;
        background: var(--g);
        color: #fff;
      }
      .chat form {
        display: flex;
        padding: 10px;
        border-top: 1px solid #ddd;
      }
      .chat input {
        flex: 1;
        min-width: 0;
        border: 0;
        padding: 10px;
      }
      .chat form button {
        width: 40px;
        border: 0;
        border-radius: 50%;
        background: var(--n);
        color: #fff;
      }
      .trip-loader {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        padding: 24px;
        color: #fff;
        background:
          linear-gradient(135deg, rgba(6, 28, 42, .96), rgba(13, 47, 69, .91)),
          url("assets/zion.jpg") center / cover;
      }
      .trip-loader-card {
        width: min(560px, 100%);
        padding: clamp(38px, 7vw, 70px) clamp(28px, 7vw, 64px);
        text-align: center;
        border: 1px solid rgba(255, 255, 255, .2);
        border-top: 5px solid #eb6b40;
        background: rgba(13, 47, 69, .9);
        box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
      }
      .trip-loader-mark {
        display: inline-grid;
        place-items: center;
        width: 58px;
        height: 58px;
        margin-bottom: 24px;
        border: 2px solid rgba(255, 255, 255, .25);
        border-top-color: #eb6b40;
        border-radius: 50%;
        animation: loader-spin .8s linear infinite;
      }
      .trip-loader-mark::after {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #eb6b40;
        box-shadow: 0 0 0 7px rgba(166, 195, 60, .16);
      }
      .trip-loader h2 {
        margin: 0;
        font: 900 clamp(30px, 6vw, 52px) / .95 var(--sans);
        letter-spacing: -.045em;
      }
      .trip-loader h2 span { color: #eb6b40; }
      .trip-loader-message {
        min-height: 1.5em;
        margin: 20px 0 24px;
        color: #d9e1e5;
        font-size: 16px;
      }
      .trip-loader-track {
        height: 4px;
        overflow: hidden;
        background: rgba(255, 255, 255, .16);
      }
      .trip-loader-track span {
        display: block;
        width: 100%;
        height: 100%;
        background: #eb6b40;
        transform-origin: left;
        animation: loader-progress 1.9s cubic-bezier(.2, .75, .25, 1) forwards;
      }
      @keyframes loader-spin { to { transform: rotate(360deg); } }
      @keyframes loader-progress {
        from { transform: scaleX(.04); }
        to { transform: scaleX(1); }
      }
      @media (prefers-reduced-motion: reduce) {
        .trip-loader-mark { animation: none; }
        .trip-loader-track span { animation: none; transform: scaleX(1); }
      }
      @media (max-width: 820px) {
        .top {
          height: 70px;
        }
        .top nav,
        .tools span {
          display: none;
        }
        .hero {
          padding: 42px 22px 55px;
        }
        .badge {
          display: none;
        }
        .builder {
          width: 100%;
          grid-template-columns: 1fr;
        }
        .steps {
          padding: 13px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
        }
        .steps p,
        .step span {
          display: none;
        }
        .step {
          border: 0 !important;
          padding: 0;
        }
        .step b {
          margin: auto;
        }
        .form {
          padding: 29px 20px;
        }
        .choices {
          grid-template-columns: repeat(2, 1fr);
        }
        .triphead {
          padding: 20px;
          display: block;
        }
        .actions {
          margin-top: 20px;
        }
        .actions .action-icon {
          display: none;
        }
        .tabs {
          padding: 0;
          overflow: auto;
        }
        .trip-view-switcher {
          width: calc(100% - 32px);
        }
        .trip-view-switcher .view-icon {
          display: none;
        }
        .region-map {
          min-height: 560px;
          background-position: 58% center;
        }
        .map-detail {
          left: 16px;
          top: 16px;
          width: min(310px, calc(100% - 32px));
        }
        .tripgrid {
          grid-template-columns: 1fr;
        }
        .people {
          width: 100%;
        }
        .side {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
        .pace {
          grid-template-columns: 1fr;
        }
        .schedule header {
          padding: 22px;
        }
        .stop {
          grid-template-columns: 27px minmax(0, 1fr);
          grid-template-areas:
            "marker time"
            "marker details";
          column-gap: 14px;
          row-gap: 4px;
          padding: 21px 17px;
        }
        .stop > time { grid-area: time; }
        .stop > .marker { grid-area: marker; }
        .stop > div:last-child { grid-area: details; }
        .chatbtn {
          right: 16px;
          bottom: calc(84px + env(safe-area-inset-bottom, 0px));
          background: var(--n);
          box-shadow: 0 8px 18px rgba(7, 31, 44, .28);
          z-index: 30;
        }
        .chat {
          right: 15px;
          bottom: calc(142px + env(safe-area-inset-bottom, 0px));
          max-height: calc(100dvh - 208px);
          z-index: 31;
        }
        .trip-loader-card { padding: 40px 24px; }
        .trip-loader h2 { font-size: clamp(27px, 9vw, 40px); }
      }
      @media (max-width: 520px) {
        .dates,
        .flexible-dates,
        .people,
        .side {
          grid-template-columns: 1fr;
        }
        .people {
          width: 50%;
          min-width: 180px;
          margin-left: auto;
          margin-right: auto;
        }
        .triphead h1 {
          font-size: clamp(20px, 6vw, 30px);
        }
        .schedule h2 {
          font-size: 29px;
        }
        .swap {
          display: none;
        }
        .swap-mobile {
          display: inline-block;
          border: 0;
          border-radius: 999px;
          padding: 9px 15px;
          background: var(--g);
          color: #fff;
          font: 700 10px var(--slab);
          letter-spacing: .08em;
          white-space: nowrap;
        }
        .stop-actions {
          align-items: center;
          justify-content: flex-end;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .stop-actions .tag {
          margin-right: auto;
        }
        .mobile-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-left: auto;
        }
        .stay-warning {
          align-items: flex-start;
          flex-direction: column;
        }
      }