/**
 * Homepage "Make it yours" film (Chiran approved the design 5 Nov 2026, plan page
 * claude.ai/artifact/HZPwQHP7tVRXv4LRGEzbYn version 4). Looks copied from the live trip
 * page: day card + service row (itinerary-builder-redesign.css, itinerary-ds-reskin.css),
 * card message ribbon (.aib-card-ribbon), chat bubbles (trip-page-v2.css).
 * Every class starts with htd- so the homepage's own .svc / .msg / .tot / .sl rules never reach it.
 * The box has fixed heights, so nothing on the page moves while it plays.
 */
.htd-c{container-type:inline-size}
.htd-demo{font-family:var(--font-body,"Google Sans"),system-ui,sans-serif;color:#1a1a1d;background:#fafafa;border:1px solid #ececf0;border-radius:20px;padding:26px 26px 22px;text-align:left}
.htd-demo *{box-sizing:border-box}
.htd-demo p,.htd-demo b,.htd-demo h3{margin:0}
.htd-demo.htd-ff *,.htd-demo.htd-ff *::before{transition:none!important;animation:none!important}
@container (max-width:640px){.htd-demo{padding:22px 14px 20px}}
.htd-steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.htd-steps__l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8e8ea0;align-self:center;margin-right:2px}
.htd-step{font:600 12px/1.2 "Google Sans",system-ui,sans-serif;cursor:pointer;color:#5d5d70;background:#fff;border:1px solid #e8e8ee;border-radius:999px;padding:5px 11px;transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.htd-step.htd-on{background:#7700FF;border-color:#7700FF;color:#fff}
.htd-step.htd-done{color:#7700FF;border-color:#e4d2ff}
/* Chiran, 5 Nov 2026: the grey panel stays full width; inside it the trip is 840 px and the
   chat 320 px, centred (1,180 px in all). On narrower screens they share what there is. */
.htd-dg{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;max-width:1180px;margin-inline:auto}
.htd-steps,.htd-cap{max-width:1180px;margin-inline:auto}
@container (max-width:860px){.htd-dg{grid-template-columns:1fr;gap:14px}}

/* itinerary window: FIXED height, the page around it never moves */
.htd-vp{position:relative;height:640px;overflow:hidden;border-radius:16px;background:#fafafa}
@container (max-width:640px){.htd-vp{height:500px}}
.htd-vp__in{position:absolute;left:0;right:0;top:0;transition:transform .8s cubic-bezier(.3,.7,.2,1);will-change:transform;padding:2px 2px 40px}
.htd-vp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(rgba(250,250,250,0),#fafafa);pointer-events:none;z-index:3}
.htd-days{display:flex;flex-direction:column;gap:12px}

/* day card — values from the live trip page (.htd-day-card / .htd-aib-day-header) */
.htd-dc{background:#fff;border:1px solid #e8e8ee;border-radius:16px;transition:border-color .35s,box-shadow .35s,transform .7s cubic-bezier(.3,.7,.2,1);position:relative;overflow:hidden}
.htd-dc.htd-open{border-color:#cdb3ff;box-shadow:0 6px 22px -10px rgba(119,0,255,.35)}
.htd-dc.htd-lift{box-shadow:0 22px 40px -14px rgba(9,9,32,.35);border-color:#7700FF;z-index:5;cursor:grabbing}
.htd-dh{display:flex;align-items:center;gap:16px;padding:12px 15px;border-radius:16px 16px 0 0;transition:background .35s,padding-top .35s}
.htd-dc.htd-has-rib>.htd-dh{padding-top:34px}
.htd-dc:not(.htd-open) .htd-dh{border-radius:16px}
.htd-dc.htd-open .htd-dh{background:#faf6ff}
.htd-dt{width:38px;height:38px;border-radius:50%;border:1px solid #7700FF;color:#7700FF;display:flex;align-items:center;justify-content:center;flex:none;transition:background .3s,color .3s}
.htd-dt svg{width:18px;height:18px;transition:transform .35s}
.htd-dc.htd-open .htd-dt{background:#7700FF;color:#fff}.htd-dc.htd-open .htd-dt svg{transform:rotate(180deg)}
.htd-dl{width:104px;font-size:14px;font-weight:800;letter-spacing:1.68px;color:#7700FF;flex:none;padding:0 4px;transition:color .3s}
.htd-dr{width:1px;height:34px;background:#e8e8ee;flex:none}
.htd-dm{flex:1;min-width:0}
.htd-dm b{display:block;font-size:16px;font-weight:700;color:#1a1a1d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htd-dm span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:#6a6a73;margin-top:2px;white-space:nowrap}
.htd-dm span svg{width:13px;height:13px;flex:none}
.htd-dp{font-size:16px;font-weight:700;color:#090902;flex:none;min-width:84px;text-align:right;font-variant-numeric:tabular-nums}
.htd-flashv{animation:fv 1.2s ease}
@keyframes fv{0%,100%{color:inherit}25%,60%{color:#7700FF}}
@container (max-width:640px){
  .htd-dh{gap:10px;padding:11px 12px}.htd-dl{width:62px;font-size:12px;letter-spacing:1px;padding:0}.htd-dr{display:none}
  .htd-dm b{font-size:14.5px}.htd-dm span{font-size:12px}.htd-dp{font-size:14.5px;min-width:0}.htd-dt{width:32px;height:32px}.htd-dt svg{width:16px;height:16px}
}
.htd-db{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.htd-dc.htd-open .htd-db{grid-template-rows:1fr}
.htd-db>div{overflow:hidden;min-height:0}
.htd-dbi{padding:14px 16px 14px;display:flex;flex-direction:column;gap:10px}
@container (max-width:640px){.htd-dbi{padding:12px 10px}}
.htd-info{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.htd-info>div{background:#fafafa;border-radius:10px;padding:9px 14px}
.htd-info b{display:block;font-size:11px;font-weight:700;letter-spacing:.55px;text-transform:uppercase;color:#5a5a6e}
.htd-info span{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:#090902;white-space:nowrap}
.htd-info span svg{width:15px;height:15px;color:#7700FF}
.htd-air{display:inline-flex;align-items:center;gap:6px;background:#f3ecff;color:#5a00c2;border:1px solid rgba(119,0,255,.18);border-radius:999px;font-weight:600;font-size:12.5px;padding:8px 14px;white-space:nowrap}
.htd-air svg{width:14px;height:14px}
@container (max-width:640px){.htd-info>div{padding:8px 11px}.htd-info span{font-size:13.5px}}
.htd-list{display:flex;flex-direction:column}
.htd-slot{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s ease,margin .5s ease;margin-bottom:10px}
.htd-slot.htd-shut{grid-template-rows:0fr;margin-bottom:0}
.htd-slot>div{overflow:hidden;min-height:0}
.htd-slot.htd-shut>div{overflow:hidden}

/* service row — values from .htd-service-component on the live trip page */
.htd-svc{position:relative;background:#fff;border:1px solid #e8e8ee;border-radius:11px;box-shadow:0 1px 2px rgba(20,20,30,.04);overflow:hidden;transition:transform .65s cubic-bezier(.4,.1,.3,1),opacity .55s,border-color .3s,background-color .3s,box-shadow .3s}
.htd-svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tone);transition:background .3s}
.htd-svc.htd-t-hotel{--tone:#0050d8;--tint:#E4EEFB}.htd-svc.htd-t-act{--tone:#3C6B52;--tint:#DCEBE1}.htd-svc.htd-t-cur{--tone:#4A00A0;--tint:#EFE6FA}
.htd-sh{display:flex;align-items:center;gap:13px;padding:8px 12px 8px 16px;min-height:76px;transition:padding-top .35s}
.htd-svc.htd-has-rib>.htd-sh{padding-top:30px}
.htd-sc{width:28px;height:28px;border:1px solid #dcdcd9;border-radius:8px;color:#8e8ea0;display:flex;align-items:center;justify-content:center;flex:none}
.htd-sc svg{width:14px;height:14px}
.htd-st{width:44px;height:44px;border-radius:10px;background:var(--tint);color:var(--tone);display:flex;align-items:center;justify-content:center;flex:none}
.htd-st svg{width:22px;height:22px}
.htd-sn{flex:1;min-width:0}
.htd-sl{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.84px;text-transform:uppercase;color:var(--tone);line-height:1.6}
.htd-sl svg{width:12px;height:12px}
.htd-sn b{display:block;font-size:15px;font-weight:700;color:#090902;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htd-sn i{display:flex;align-items:center;gap:4px;font-style:normal;font-size:12.5px;color:#6a6a73;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htd-sn i svg{width:12px;height:12px;flex:none}
.htd-sr{display:flex;align-items:center;gap:8px;flex:none}
.htd-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#3a3a40;background:#fff;border:1px solid #dcdcd9;border-radius:999px;padding:5px 11px;white-space:nowrap;transition:border-color .3s,color .3s,background-color .3s}
.htd-chip svg{width:13px;height:13px;color:#8e8ea0}
.htd-chip.htd-hot{border-color:#7700FF;color:#7700FF;background:#faf6ff}
.htd-spr{min-width:72px;text-align:right;font-size:15px;font-weight:700;color:#090902;font-variant-numeric:tabular-nums;line-height:1.25}
.htd-spr small{display:block;font-size:11px;font-weight:500;color:#8e8ea0}
.htd-del{width:28px;height:28px;border:1px solid #dcdcd9;border-radius:8px;color:#8e8ea0;display:flex;align-items:center;justify-content:center;flex:none;transition:all .25s}
.htd-del svg{width:14px;height:14px}
.htd-del.htd-hot{border-color:#D4001A;color:#D4001A;background:#FFF0F2}
@container (max-width:640px){
  .htd-sh{flex-wrap:wrap;gap:8px 10px;padding:10px 10px 10px 14px;min-height:0}
  .htd-sc{display:none}.htd-st{width:36px;height:36px}.htd-st svg{width:18px;height:18px}
  .htd-sn{flex:1 1 calc(100% - 112px)}.htd-sn b{font-size:14px}
  /* the date, time, meal and price wrap instead of running off the card (10 Nov 2026: "USD 18…" was cut) */
  .htd-sr{order:3;width:100%;padding-left:0;flex-wrap:wrap;gap:6px}
  .htd-del{display:none}
  .htd-chip{font-size:11.5px;padding:4px 9px}
  .htd-spr{margin-left:auto;min-width:0;font-size:14px;white-space:nowrap}
  .htd-spr small{display:none}
}
/* the three moves Chiran asked for */
.htd-svc.htd-in{border-color:#30B300;background:#f4fbf0;box-shadow:0 0 0 3px rgba(48,179,0,.18)}
.htd-svc.htd-in::before{background:#30B300}
.htd-svc.htd-out{border-color:#D4001A;background:#FFF0F2;box-shadow:0 0 0 3px rgba(255,10,31,.14)}
.htd-svc.htd-out::before{background:#D4001A}
.htd-svc.htd-toss{transform:translate(70%,-28px) rotate(9deg);opacity:0}
.htd-svc.htd-arrive{transform:translate(-60%,-30px) rotate(-7deg);opacity:0}
.htd-svc.htd-ring{box-shadow:0 0 0 3px rgba(119,0,255,.25)}
.htd-svc.htd-lift{box-shadow:0 20px 34px -12px rgba(9,9,32,.35);border-color:#7700FF;transform:scale(1.02)}
/* CARD MESSAGE RIBBON — same as the trip page (.htd-aib-card-ribbon): a half pill tucked into
   the top centre of a service or day card. One line, never wraps. */
.htd-rib{position:absolute;top:-11px;left:50%;transform:translateX(-50%) translateY(-30px);z-index:8;display:inline-flex;align-items:center;justify-content:center;max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:15px 20px 5px;border-radius:0 0 12px 12px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;pointer-events:none;transition:transform .35s ease}
.htd-has-rib>.htd-rib{transform:translateX(-50%)}
.htd-rib.htd-error{background:#FF0A1F;box-shadow:0 5px 9px -3px rgba(255,10,31,.35)}
.htd-rib.htd-warning{background:#F2A024;box-shadow:0 5px 9px -3px rgba(242,160,36,.35)}
.htd-rib.htd-success{background:#2BA23C;box-shadow:0 5px 9px -3px rgba(43,162,60,.35)}
.htd-rib.htd-info{background:#7700FF;box-shadow:0 5px 9px -3px rgba(119,0,255,.3)}
.htd-rib.htd-neutral{background:#E7E7EE;color:#3A3A4A;box-shadow:0 5px 9px -3px rgba(9,9,32,.14)}
.htd-addrow{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed #d6bdff;border-radius:11px;padding:10px;font-size:13px;font-weight:600;color:#7700FF;background:#fff}
.htd-addrow svg{width:15px;height:15px}
.htd-ghost{position:absolute;z-index:8;pointer-events:none;transition:transform .9s cubic-bezier(.4,.1,.3,1)}
.htd-ghost .htd-svc{box-shadow:0 22px 40px -14px rgba(9,9,32,.4);border-color:#7700FF}
.htd-cur{position:absolute;z-index:9;width:22px;height:22px;border-radius:50%;background:rgba(119,0,255,.18);border:2px solid #7700FF;left:0;top:0;transform:translate(-200px,-200px);transition:transform .7s cubic-bezier(.3,.7,.2,1);pointer-events:none}
.htd-cur.htd-press{animation:press .5s ease}
@keyframes press{0%{box-shadow:0 0 0 0 rgba(119,0,255,.5)}100%{box-shadow:0 0 0 14px rgba(119,0,255,0)}}
.htd-cur.htd-grab{background:#7700FF}

/* right column: chat + totals (fixed heights) */
.htd-side{display:flex;flex-direction:column;gap:14px}
.htd-chat{background:#fff;border:1px solid #e8e8ee;border-radius:16px;overflow:hidden}
.htd-chat__h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #f0f0f4}
.htd-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7700FF,#A55CFF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.htd-chat__h b{display:block;font-size:13.5px}.htd-chat__h small{font-size:11.5px;color:#6a6a73}
.htd-chat__b{position:relative;height:330px;overflow:hidden;background:#fcfbff}
@container (max-width:860px){.htd-chat__b{height:250px}}
.htd-chat__s{position:absolute;left:0;right:0;bottom:0;padding:14px;display:flex;flex-direction:column;gap:9px;transition:transform .45s ease}
.htd-chat__b::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;background:linear-gradient(#fcfbff,rgba(252,251,255,0));z-index:2;pointer-events:none}
.htd-msg{max-width:88%}
.htd-msg small{display:block;font-size:11px;color:#8e8ea0;margin:0 4px 3px}
.htd-msg p{font-size:13.5px;line-height:1.45;color:#090920;padding:9px 12px;border-radius:14px}
.htd-msg.htd-me{align-self:flex-end}.htd-msg.htd-me small{text-align:right}
.htd-msg.htd-me p{background:#e4d2ff;border:1px solid #d6bdff;border-bottom-right-radius:4px}
.htd-msg.htd-them p{background:#fff;border:1px solid #ececf0;border-bottom-left-radius:4px}
.htd-msg.htd-pop{animation:pop .4s ease both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.htd-dots{display:inline-flex;gap:4px;padding:11px 14px!important}
.htd-dots i{width:6px;height:6px;border-radius:50%;background:#b9b9c6;animation:dot 1s infinite}
.htd-dots i:nth-child(2){animation-delay:.15s}.htd-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.4}30%{opacity:1}}
.htd-chat__f{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #f0f0f4}
.htd-chat__f span{flex:1;font-size:13px;color:#9a9aa3;border:1px solid #ececf0;border-radius:999px;padding:8px 12px}
.htd-chat__f i{width:34px;height:34px;border-radius:50%;background:#7700FF;color:#fff;display:flex;align-items:center;justify-content:center}
.htd-chat__f svg{width:15px;height:15px}
.htd-pp{background:#fff;border:1px solid #e8e8ee;border-radius:16px;padding:16px 18px}
.htd-pp__hd{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7700FF;margin-bottom:4px}
.htd-row{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;border-bottom:1px solid #f0f0f4;color:#3a3a40;font-variant-numeric:tabular-nums}
.htd-row b{color:#090920;font-weight:700}
.htd-tot{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0 4px;font-weight:700;font-size:14px;color:#090920}
.htd-tot b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;transition:color .4s}
.htd-tot.htd-flash b{color:#30B300}
.htd-saved{display:flex;align-items:center;gap:8px;margin-top:8px;height:36px;padding:0 12px;border-radius:12px;background:#EEF8EA;color:#1f6b00;font-size:13px;font-weight:600;opacity:0;transition:opacity .4s}
.htd-saved svg{width:15px;height:15px}
.htd-saved.htd-on{opacity:1}
.htd-nsb{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;min-height:40px;margin-top:10px;font-size:14px;font-weight:700;background:#7700FF;color:#fff}
.htd-nsb svg{width:16px;height:16px}
.htd-nsb.htd-glow{animation:glow 1.1s ease 2}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(119,0,255,.5)}100%{box-shadow:0 0 0 14px rgba(119,0,255,0)}}
.htd-cap{margin-top:14px;font-size:14px;color:#3b3b4f;height:44px;display:flex;gap:10px;align-items:flex-start;overflow:hidden}
.htd-cap b{color:#7700FF;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin-top:3px}
@container (max-width:640px){.htd-cap{height:62px;font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.htd-demo *,.htd-demo *::before{transition:none!important;animation:none!important}}

/* the Traveler theme styles every bare <button>: keep ours plain */
.htd-demo button.htd-step{appearance:none;-webkit-appearance:none;margin:0!important;min-height:0!important;height:auto!important;width:auto!important;line-height:1.2!important;
  padding:5px 11px!important;font-size:12px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important;
  background:#fff!important;border:1px solid #e8e8ee!important;border-radius:999px!important;color:#5d5d70!important}
.htd-demo button.htd-step.htd-done{border-color:#e4d2ff!important;color:#7700FF!important}
.htd-demo button.htd-step.htd-on{background:#7700FF!important;border-color:#7700FF!important;color:#fff!important}
.htd-demo button.htd-step:hover{border-color:#7700FF!important}
.htd-demo button.htd-step:focus-visible{outline:2px solid #7700FF;outline-offset:2px}

/* the caption lines up with the trip (the demo resets p margins, so set it with two classes) */
.htd-demo .htd-cap{margin:14px auto 0}

/* ── FIT IN ONE SCREEN (Chiran, 5 Nov 2026: "Done customising is cut off at the bottom") ──
   The whole grey panel must fit inside the visitor's screen, on any computer or phone,
   so nobody scrolls up and down to watch. The trip window and the right column take
   their height from the screen (never taller than 640 px); the chat fills what is left
   in the right column. The "Itinerary saved" box is dropped: the green "Saved" half
   pills on every day already say it. Heights stay fixed while the film plays. */
.htd-demo{--htd-h:clamp(520px, calc(100svh - 230px), 640px)}
.htd-vp{height:var(--htd-h)}
.htd-side{height:var(--htd-h)}
.htd-chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.htd-chat__b{flex:1 1 auto;height:auto;min-height:0}
.htd-demo .htd-saved{display:none}
.htd-row{padding:6px 0}
/* phone and narrow tablet: Ravi's latest message above the trip, the total + Done in one bar below */
@container (max-width:860px){
  /* full width for every piece (Chiran, 10 Nov 2026: on the phone the trip window was 4 px wide and the chat
     shrank to its words, because the computer layout's align-items:start stayed on in the one-column layout) */
  .htd-dg{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .htd-vp,.htd-chat,.htd-pp{width:100%;align-self:stretch}
  .htd-side{display:contents}
  .htd-chat{order:-1;flex:none}
  .htd-chat__h{padding:8px 12px;gap:8px}
  .htd-av{width:26px;height:26px;font-size:10px}
  .htd-chat__h small{display:none}
  .htd-chat__f{display:none}
  .htd-chat__b{flex:none;height:96px}
  .htd-vp{order:0;height:clamp(260px, calc(100svh - 410px), 520px)}
  .htd-pp{order:1;display:flex;align-items:center;gap:12px;padding:10px 14px}
  .htd-pp__hd,.htd-row{display:none}
  .htd-tot{flex:1;padding:0;justify-content:flex-start;gap:6px;min-width:0}
  .htd-tot b{font-size:19px;white-space:nowrap} /* "Total USD 1,486" on one line, with a space (10 Nov 2026) */
  .htd-nsb{margin-top:0;min-height:38px;padding:0 14px;font-size:13px;white-space:nowrap}
  .htd-steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
  .htd-steps::-webkit-scrollbar{display:none}
  .htd-step{flex:none}
  .htd-cap{height:58px}
}