/* The phone in "A text becomes a trip". Drawn at the real 402 x 874 point screen, then scaled to fit. */
.ims { --ims-scale:.791; width:100%; min-width:0; margin:0; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:16px; }
.ims *, .ims *::before, .ims *::after { box-sizing:border-box; }
.ims-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Hardware */
.ims-phone { position:relative; isolation:isolate; width:min(100%,336px); padding:3px; border-radius:calc(62px * var(--ims-scale) + 9px);
  background:linear-gradient(135deg,#8f8c87 0%,#dcd9d3 16%,#85827d 30%,#55534f 50%,#8d8a85 68%,#e2dfd9 86%,#8b8883 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.55), 0 34px 60px -18px rgba(44,31,55,.42), 0 14px 26px -12px rgba(44,31,55,.26); }
.ims-bezel { padding:6px; border-radius:calc(62px * var(--ims-scale) + 6px); background:#050506; box-shadow:0 0 0 .5px #000; }
.ims-viewport { position:relative; aspect-ratio:402 / 874; overflow:hidden; border-radius:calc(62px * var(--ims-scale)); background:#fff; }
.ims-side { position:absolute; z-index:-1; width:3px; background:linear-gradient(90deg,#65625e,#b9b6b0 55%,#74716d); }
.ims-side-action { left:-2px; top:20.500%; height:4.500%; border-radius:2px 0 0 2px; }
.ims-side-up { left:-2px; top:28.600%; height:7.400%; border-radius:2px 0 0 2px; }
.ims-side-down { left:-2px; top:38.300%; height:7.400%; border-radius:2px 0 0 2px; }
.ims-side-power { right:-2px; top:31%; height:11%; border-radius:0 2px 2px 0; background:linear-gradient(270deg,#65625e,#b9b6b0 55%,#74716d); }
.ims-antenna { position:absolute; z-index:1; width:3px; height:2px; background:rgba(50,48,46,.5); }
.ims-antenna-tl { left:0; top:11.500%; }
.ims-antenna-tr { right:0; top:11.500%; }
.ims-antenna-bl { left:0; bottom:11.500%; }
.ims-antenna-br { right:0; bottom:11.500%; }

/* Screen */
.ims-screen { position:absolute; left:0; top:0; width:402px; height:874px; transform-origin:0 0; transform:scale(var(--ims-scale)); overflow:hidden; background:#fff; color:#000;
  font:400 17px/22px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; letter-spacing:-.43px; text-align:left; -webkit-font-smoothing:antialiased; }
.ims-chrome { position:absolute; inset:0; pointer-events:none; }
.ims-glass { background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(14px) saturate(1.7); backdrop-filter:blur(14px) saturate(1.7);
  box-shadow:0 3px 14px rgba(0,0,0,.09), 0 0 0 .5px rgba(0,0,0,.035), inset 0 0 0 .5px rgba(255,255,255,.9); }
.ims-round { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; color:#111; }

/* Status bar and island */
.ims-status { position:absolute; inset:0 0 auto; z-index:3; height:59px; padding:6px 30px 0 46px; display:flex; align-items:center; justify-content:space-between; }
.ims-time { font-weight:600; font-size:17px; letter-spacing:-.2px; }
.ims-status-icons { display:flex; align-items:center; gap:6px; }
.ims-status-icons svg { display:block; fill:currentColor; }
.ims-island { position:absolute; z-index:7; top:11px; left:138px; width:126px; height:37px; border-radius:20px; background:#000; }
.ims-island span { position:absolute; right:12px; top:12.500px; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 42% 40%,#27304d 0 18%,#10131f 42%,#050508 72%); box-shadow:inset 0 0 0 1px #15161b; }

/* Navigation */
.ims-nav-blur { position:absolute; inset:0 0 auto; z-index:2; height:172px; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  background:linear-gradient(rgba(255,255,255,.94) 42%,rgba(255,255,255,.6) 72%,rgba(255,255,255,0));
  -webkit-mask-image:linear-gradient(#000 66%,transparent); mask-image:linear-gradient(#000 66%,transparent); }
.ims-nav { position:absolute; inset:63px 16px auto; z-index:3; display:flex; justify-content:space-between; }
.ims-contact { position:absolute; left:50%; top:0; display:grid; justify-items:center; transform:translateX(-50%); }
.ims-avatar { display:grid; place-items:center; width:60px; height:60px; border-radius:50%; background:linear-gradient(165deg,#f5f0fa,#d9cfe9); box-shadow:inset 0 0 0 .5px rgba(64,54,78,.1); }
.ims-avatar img { display:block; width:38px; height:38px; }
.ims-name { display:inline-flex; align-items:center; gap:6px; height:32px; margin-top:-5px; padding:0 13px 0 15px; border-radius:16px; font-size:16px; font-weight:600; letter-spacing:-.3px; }
.ims-name svg { color:#8a8a8e; }

/* Thread */
.ims-thread { position:absolute; inset:0; }
.ims-scroll { position:relative; padding:164px 18px 0; transition:transform .42s cubic-bezier(.22,.9,.3,1); will-change:transform; }
.ims-stamp { display:grid; margin:0 0 12px; text-align:center; color:#6c6c70; font-size:11px; line-height:14px; letter-spacing:.05px; }
.ims-stamp strong { font-weight:600; }
.ims-msg { position:relative; width:fit-content; max-width:286px; margin-top:10px; padding:7px 14px 8px; border-radius:20px; word-break:break-word; }
.ims-msg::before, .ims-msg::after { content:""; position:absolute; bottom:0; height:20px; }
.ims-sent { margin-left:auto; color:#fff; background:var(--ims-blue); }
.ims-sent::before { right:-7px; width:20px; background:var(--ims-blue); border-bottom-left-radius:16px 14px; }
.ims-sent::after { right:-26px; width:26px; background:#fff; border-bottom-left-radius:10px; }
.ims-sent-1 { --ims-blue:#0875f3; }
.ims-sent-2 { --ims-blue:#0771ee; }
.ims-sent-3 { --ims-blue:#066ce8; }
.ims-received { margin-right:auto; color:#000; background:#e9e9eb; }
.ims-received::before { left:-7px; width:20px; background:#e9e9eb; border-bottom-right-radius:16px 14px; }
.ims-received::after { left:-26px; width:26px; background:#fff; border-bottom-right-radius:10px; }
.ims-received + .ims-received { margin-top:3px; }
.ims-received:has(+ .ims-received:not(.is-pending))::before, .ims-received:has(+ .ims-received:not(.is-pending))::after { display:none; }
.ims-link { width:286px; padding:0; }
.ims-link img { display:block; width:100%; height:178px; object-fit:cover; object-position:center 46%; border-radius:20px 20px 0 0; }
.ims-link-meta { display:grid; gap:1px; padding:8px 14px 10px; }
.ims-link-meta strong { font-size:15px; line-height:20px; font-weight:600; letter-spacing:-.24px; }
.ims-link-meta span { font-size:13px; line-height:18px; color:#636366; letter-spacing:-.08px; }
.ims-receipt { height:0; overflow:hidden; opacity:0; text-align:right; padding-right:5px; color:#6c6c70; font-size:12px; font-weight:600; line-height:18px; letter-spacing:-.05px; transition:height .2s ease, opacity .2s ease; }
.ims-receipt.is-current { height:19px; padding-top:1px; opacity:1; }
.ims-typing { position:absolute; left:18px; top:0; display:none; align-items:center; gap:5px; height:38px; padding:0 14px; border-radius:20px; background:#e9e9eb; transform-origin:0 100%; }
.ims-typing::before, .ims-typing::after { content:""; position:absolute; border-radius:50%; background:#e9e9eb; }
.ims-typing::before { left:-1px; bottom:-1px; width:14px; height:14px; }
.ims-typing::after { left:-6px; bottom:-6px; width:7px; height:7px; }
.ims-typing.is-on { display:flex; animation:ims-pop .26s cubic-bezier(.2,1.3,.4,1); }
.ims-typing i { width:9px; height:9px; border-radius:50%; background:#8e8e93; animation:ims-dot 1s ease-in-out infinite; }
.ims-typing i:nth-child(2) { animation-delay:.16s; }
.ims-typing i:nth-child(3) { animation-delay:.32s; }
.ims[data-state="playing"] .ims-msg.is-pending { opacity:0; }
@keyframes ims-dot { 0%,60%,100% { opacity:.38; } 30% { opacity:1; } }
@keyframes ims-pop { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:none; } }

/* Compose bar */
.ims-compose { position:absolute; inset:auto 0 0; z-index:4; display:flex; align-items:flex-end; gap:10px; padding:8px 16px 40px; }
.ims-compose::before { content:""; position:absolute; z-index:-1; inset:-22px 0 0; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); background:linear-gradient(transparent,rgba(255,255,255,.86) 34%);
  -webkit-mask-image:linear-gradient(transparent,#000 30%); mask-image:linear-gradient(transparent,#000 30%); }
.ims-field { position:relative; flex:1; min-width:0; min-height:44px; padding:11px 50px 11px 16px; border-radius:22px; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.09), 0 0 0 .5px rgba(0,0,0,.05); }
.ims-field-text { display:block; min-height:22px; }
.ims-input { white-space:pre-wrap; word-break:break-word; }
.ims-placeholder { color:#6c6c70; }
.ims-caret { display:none; width:2px; height:21px; margin:0 -1px; vertical-align:-4px; border-radius:1px; background:#0a7cff; }
.ims-mic, .ims-send { position:absolute; right:4px; bottom:6px; display:grid; place-items:center; height:32px; }
.ims-mic { width:40px; color:#6c6c70; }
.ims-send { display:none; width:42px; border-radius:16px; color:#fff; background:#0a7cff; transition:transform .12s ease; }
.ims-compose.is-focus .ims-caret { display:inline-block; animation:ims-caret 1.05s steps(1) infinite; }
.ims-compose.is-focus .ims-placeholder { position:absolute; margin-left:3px; }
.ims-compose.has-text .ims-placeholder, .ims-compose.has-text .ims-mic { display:none; }
.ims-compose.has-text .ims-send { display:grid; }
.ims-send.is-down { transform:scale(.88); }
@keyframes ims-caret { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }
.ims-home { position:absolute; z-index:6; left:131px; bottom:8px; width:140px; height:5px; border-radius:3px; background:#000; }

/* Caption and control under the phone */
.ims-foot { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; color:#68616f; font-size:13px; line-height:1.5; }
html[data-awaya-theme] body .ims-foot p { margin:0; }
.ims-replay { padding:6px 2px; border:0; background:none; color:#40364e; font:inherit; font-weight:650; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ims-replay:hover { color:#604d77; }
.ims-replay:focus-visible { outline:2px solid #8063aa; outline-offset:3px; border-radius:3px; }

/* Awaya's look-up reaction on the traveller's first message. */
.ims-sent-1 { margin-top:18px; }
.ims-tapback { position:absolute; z-index:2; left:-16px; top:-29px; display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--ims-blue); box-shadow:0 0 0 2px #fff; transform-origin:20% 90%; }
.ims-tapback::before, .ims-tapback::after { content:""; position:absolute; border-radius:50%; background:var(--ims-blue); }
.ims-tapback::before { left:.5px; top:29px; width:10.500px; height:10.500px; }
.ims-tapback::after { left:-4px; top:40.500px; width:5.500px; height:5.500px; }
.ims-tapback svg { position:relative; z-index:1; display:block; }
.ims[data-state="playing"] .ims-tapback.is-pending { opacity:0; }

/* A text becomes a trip: the page comes into focus as the messages land, and the link's photo becomes its cover. */
.ims-pages [data-detail] { transition:filter .75s cubic-bezier(.16,1,.3,1), opacity .75s cubic-bezier(.16,1,.3,1); }
.ims-pages .is-soft { filter:blur(7px); opacity:.32; }
.ims-pages .ims-page-url.is-soft { filter:none; opacity:0; }
@media (min-width:761px) { .ims-pages [data-detail] { transition-duration:.35s; } }
.trip-preview-photo { background:#e4dded; }
.trip-preview-photo img { transition:opacity .45s ease; }
.trip-preview-photo img.is-waiting { opacity:0; }
.ims-flight { position:absolute; z-index:5; object-fit:cover; object-position:center 46%; pointer-events:none; }
.ims-touch { position:absolute; z-index:8; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:rgba(40,40,48,.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.18); opacity:0; }
/* The trip card reads as the page the link opens. */
.trip-preview-photo > .ims-page-url { top:12px; left:12px; display:inline-flex; align-items:center; gap:5px; padding:5px 11px 5px 9px; border-radius:15px; background:rgba(255,255,255,.92); color:#292530; font-size:12px; font-weight:650; line-height:16px; box-shadow:0 2px 8px rgba(44,31,55,.18); }

/* The trip page the link opens. */
.ims-pages { min-width:0; width:100%; }
.ims-pages .trip-preview { max-width:none; justify-self:stretch; border-radius:16px; box-shadow:0 22px 55px rgba(44,31,55,.12); color:#292530; font-variant-numeric:tabular-nums; }
html[data-awaya-theme] body .ims-pages h2 { margin:0; font-size:30px; font-weight:650; line-height:1.15; letter-spacing:-.035em; color:inherit; }
html[data-awaya-theme] body .ims-pages p { margin:0; }
.tp-body { display:grid; gap:18px; padding:22px 24px 22px; }
.tp-head p { margin-top:6px !important; color:#68616f; font-size:13px; line-height:1.5; }
.tp-route { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; }
.tp-route > div > strong { display:block; font-size:25px; font-weight:650; line-height:1.1; letter-spacing:-.03em; white-space:nowrap; }
.tp-route small { margin-left:1px; font-size:13px; font-weight:650; letter-spacing:0; }
.tp-route sup { margin-left:2px; font-size:11px; font-weight:650; letter-spacing:0; line-height:0; }
.tp-route > div > span { display:block; margin-top:5px; color:#68616f; font-size:12px; font-weight:650; letter-spacing:.02em; }
.tp-arrive { text-align:right; }
.tp-line { display:grid; justify-items:center; gap:4px; padding-top:1px; color:#68616f; font-size:11px; line-height:1.3; text-align:center; }
.tp-line i { position:relative; width:100%; border-top:2px dotted #a89fb3; }
.tp-line i::before, .tp-line i::after { content:""; position:absolute; top:-5px; width:8px; height:8px; border-radius:50%; background:#40364e; }
.tp-line i::before { left:0; }
.tp-line i::after { right:0; }
.tp-small { color:#68616f; font-size:12px; line-height:1.5; }
.tp-mark { display:block; width:44px; height:44px; flex:none; padding:7px; border-radius:11px; background:#f0ebf7; object-fit:contain; }

/* Cover story: the destination sells, the numbers stay close. */
.ims-pages .tp-cover .trip-preview-photo { height:clamp(220px,33svh,320px); }
.tp-cover .trip-preview-photo::after { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,rgba(24,17,32,.82)); transition:opacity .45s ease; }
.tp-cover .trip-preview-photo:has(img.is-waiting)::after { opacity:0; }
.tp-cover-title { position:absolute; z-index:1; left:24px; right:24px; bottom:22px; color:#fff; }
html[data-awaya-theme] body .ims-pages .tp-cover-title h2 { color:#fff; font-size:38px; line-height:1.05; letter-spacing:-.04em; }
html[data-awaya-theme] body .ims-pages .tp-cover-title p { margin-top:8px; color:#fff; font-size:13px; line-height:1.4; }
.tp-split { display:grid; grid-template-columns:1fr 1fr; }
.tp-split section { display:grid; align-content:start; justify-items:start; gap:3px; padding-right:16px; }
.tp-split section + section { padding:0 0 0 16px; border-left:1px solid #e9e5ee; }
.tp-split .tp-logo { display:block; width:82px; height:44px; margin-bottom:8px; object-fit:contain; object-position:left center; }
.tp-split .tp-mark { margin-bottom:8px; }
.tp-split strong { font-size:18px; font-weight:650; line-height:1.2; letter-spacing:-.025em; }
.tp-split small { color:#514959; font-size:12px; line-height:1.4; }
.tp-split span { margin-top:7px; color:#68616f; font-size:12px; line-height:1.45; }

@media (max-width:760px) {
  .tp-body { padding:20px 18px; }
  .tp-cover-title { left:18px; right:18px; }
  html[data-awaya-theme] body .ims-pages .tp-cover-title h2 { font-size:32px; }
  .tp-route > div > strong { font-size:22px; }
}
/* Without JavaScript the scale can't follow the width, so these two sizes pair up. */
@media (max-width:760px) {
  .ims { --ims-scale:.702; }
  .ims-phone { width:300px; }
}
@media (max-width:340px) {
  .ims { --ims-scale:.632; }
  .ims-phone { width:272px; }
}
.ims[data-fit] .ims-phone { width:var(--ims-phone,min(100%,312px)); }
@media (prefers-reduced-motion:reduce) {
  .ims-scroll, .ims-receipt { transition:none; }
}

/* The section's structure: each half of the sentence sits on top of the thing it describes.
   No panel. The phone and the page sit directly on the page, and Tokyo's colour blooms behind them when the trip opens.
   The phone's width follows the screen's height (.4739 is its width over its height), so the whole section fits on a laptop. */
.ims-stage { --ims-phone:clamp(280px,calc((100svh - 160px) * .4739),320px); position:relative; isolation:isolate; margin-top:96px; text-align:left; }
.ims-stage.is-before .ims-glow { opacity:0; }
.ims-glow { position:absolute; z-index:-1; inset:-90px -40px; overflow:hidden; opacity:1; pointer-events:none; transition:opacity 1.5s cubic-bezier(.16,1,.3,1); -webkit-mask-image:radial-gradient(52% 46% at 67% 50%,#000 18%,transparent 100%); mask-image:radial-gradient(52% 46% at 67% 50%,#000 18%,transparent 100%); }
.ims-glow::before { content:""; position:absolute; inset:0; background:url('/landing/tokyo-trip.jpg') 50% 6% / auto 230%; filter:blur(64px) saturate(1.4) brightness(1.18); opacity:.44; }
html[data-awaya-theme] body .ims-stage p { margin:0; }
html[data-awaya-theme] body .ims-stage .ims-big { color:#292530; font-size:clamp(34px,3.2vw,46px); font-weight:600; line-height:1.1; letter-spacing:-.035em; }
html[data-awaya-theme] body .ims-stage .ims-lede { margin-top:7px; color:#514959; font-size:15px; line-height:1.45; }
.ims-grid { position:relative; display:grid; grid-template-columns:auto minmax(0,480px); justify-content:center; column-gap:clamp(56px,7vw,112px); }
.ims-col { min-width:0; display:flex; flex-direction:column; }
.ims-col-text .ims { justify-items:start; }
.ims-say { margin-bottom:22px; }
.ims-foot { margin-top:auto; padding-top:16px; }

/* Stacked, the sentence reads straight down: A text, the phone, becomes a trip, the page. */
@media (max-width:860px) {
  .ims-stage { --ims-phone:min(100%,312px); margin-top:72px; }
  .ims-grid { grid-template-columns:minmax(0,1fr); row-gap:44px; }
  .ims-glow { inset:-60px -16px; -webkit-mask-image:radial-gradient(90% 40% at 50% 56%,#000 18%,transparent 100%); mask-image:radial-gradient(90% 40% at 50% 56%,#000 18%,transparent 100%); }
  .ims-col-text .ims { justify-items:center; }
  .ims-say { margin-bottom:20px; text-align:center; }
  .ims-col-trip { width:100%; max-width:390px; justify-self:center; }
}