/* ==========================================================================
   Packcast's pages: the Holiday Poster look on the app page kit (/apps/kit/).
   Lemon from the sun on the forecast, poster ink, night blue from the app's
   dark mode, and Futura, the face of interwar travel posters, for display type
   (Apple devices have it; others get the nearest geometric sans).
   ========================================================================== */

.k-packcast {
  --k-bg: #FFFFFF;
  --k-bg-2: #F7F4DC;
  --k-ink: #141414;
  --k-ink-2: #56565B;
  --k-accent: #EBDE34;
  --k-accent-ink: #141414;
  --k-card: #FFFFFF;
  --k-line: rgba(20, 20, 20, .11);
  --k-display: Futura, "Futura PT", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --pc-lemon: #EBDE34;
  --pc-night: #0F1A2F;
  --pc-night-2: #1A2741;
}
.k-packcast main :where(h1, h2, h3) { font-weight: 500; letter-spacing: -0.01em; }
.k-packcast .k-h1 { font-size: clamp(46px, min(5.3vw, 9.6svh), 78px); }
@media (min-width: 900px) { .pc-hero .k-hero-grid { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); } }
.pc-hero :is(.k-hero-copy, .k-hero-head, .k-hero-more) > * + * { margin-top: 22px; }
@media (max-width: 899px) { .pc-hero .k-hero-copy > .k-hero-more { margin-top: 0; } }
.k-packcast .k-btn-primary.k-soon::before { background: var(--pc-lemon); box-shadow: 0 0 0 3px rgba(235, 222, 52, .35); }
.pc-price { font-size: 17px; color: var(--k-ink-2); max-width: 40ch; }
.pc-price strong { color: var(--k-ink); }

/* ---------- 1 · Hero: the case ---------- */
.pc-hero { position: relative; overflow-x: clip; }   /* the sun stays inside the hero (clip keeps the stage sticky) */
.pc-hero-stage { min-height: 100svh; display: flex; align-items: center; padding: 112px 0 56px; box-sizing: border-box; }
.pc-hero-stage::before { /* the poster's lemon sun behind the case */
  content: ""; position: absolute; right: -12vw; top: 8svh; width: 62vw; height: 62vw; max-width: 980px; max-height: 980px;
  border-radius: 50%; background: radial-gradient(circle, rgba(235,222,52,.55) 0%, rgba(235,222,52,.22) 46%, rgba(235,222,52,0) 70%); pointer-events: none; }
@media (min-width: 900px) and (min-height: 820px) {   /* Kit.pinHero */
  html.k-motion .pc-hero { height: 220svh; }
  html.k-motion .pc-hero-stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
}

.pc-hero-case { container-type: inline-size; min-width: 0; position: relative; }
.pc-case { margin: 0; }
/* The case on a fixed design grid: 1em is 1/680 of its width (1/400 in the portrait layout). */
.pc-case-in { font-size: calc(100cqw / 680); position: relative; padding-top: 64em; }
.pc-handle { position: absolute; top: 0; left: 50%; width: 222em; height: 104em; margin-left: -111em;
  border: 34em solid var(--pc-night); border-bottom: 0; border-radius: 46em 46em 0 0; }
.pc-shell { position: relative; background: var(--pc-night); border-radius: 102em; padding: 37em;
  box-shadow: 0 60em 120em -50em rgba(15, 26, 47, .55); }
.pc-shell::after { /* the lemon luggage strap */ content: ""; position: absolute; left: -10em; right: -10em; top: 46%; height: 26em; background: var(--pc-lemon); border-radius: 8em; opacity: .0; }
.pc-lining { background: #1E2A44; border-radius: 66em; height: 486em; padding: 17em; display: grid;
  grid-template-columns: 27fr 24.5fr 24.5fr 24fr; grid-template-rows: repeat(28, minmax(0, 1fr)); }
.pc-pile { padding: 10em; min-width: 0; min-height: 0; display: flex; }
.pc-pile-in { flex: 1; min-width: 0; position: relative; overflow: hidden; border-radius: 24em; background: var(--t);
  padding: 14em 13em 13em; display: flex; flex-direction: column; color: #fff; }
.pc-pile-in::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: 0; transition: opacity .25s ease; }
.pc-pile.is-done .pc-pile-in::before { opacity: 1; }
.pc-pile.is-done .pc-pile-in { color: #0B0B0C; }
.pc-pile-in > * { position: relative; }
.pc-pile .pc-pile-name { font: 600 15.5em/1.15 var(--k-text); margin: 0; }
.pc-pile p { font-size: 14em; line-height: 1.3; margin-top: .2em; opacity: .85; font-variant-numeric: tabular-nums; }
.pc-pips { display: flex; flex-wrap: wrap; gap: 5em; margin-top: auto; padding-top: 10em; }
.pc-pips i { width: 14em; height: 14em; border-radius: 4em; border: 2.2em solid var(--c); position: relative; box-sizing: border-box; }
.pc-pips i::after { content: ""; position: absolute; inset: -2.2em; border-radius: inherit; background: var(--c); opacity: 0; transition: opacity .15s ease; }
.pc-pips i.on::after { opacity: 1; }
.pc-pile.is-done .pc-pips i { border-color: rgba(0, 0, 0, .3); }
.pc-pile.is-done .pc-pips i::after { background: rgba(0, 0, 0, .3); }
.pc-p-uu { --c: #8E8E93; }
.pc-p-uu .pc-pile-in { background: transparent; border: 2.5em dashed #5D6680; color: #E5E7EE; }
.pc-p-clo { grid-column: 1; grid-row: 1 / 29; }
.pc-p-toi { grid-column: 2; grid-row: 1 / 17; }
.pc-p-med { grid-column: 2; grid-row: 17 / 29; }
.pc-p-doc { grid-column: 3; grid-row: 1 / 10; }
.pc-p-mon { grid-column: 3; grid-row: 10 / 17; }
.pc-p-ele { grid-column: 3; grid-row: 17 / 29; }
.pc-p-act { grid-column: 4; grid-row: 1 / 9; }
.pc-p-oth { grid-column: 4; grid-row: 9 / 20; }
.pc-p-uu  { grid-column: 4; grid-row: 20 / 29; }
.pc-case-under { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-top: 26px; }
.pc-case-count { font: 500 clamp(26px, 2.4vw, 34px)/1 var(--k-display); font-variant-numeric: tabular-nums; }
.pc-case-trip { font-size: 15px; color: var(--k-ink-2); }
.pc-bar { display: flex; gap: 3px; height: 30px; margin-top: 14px; }
.pc-seg { position: relative; overflow: hidden; border-radius: 7px; background: var(--t); min-width: 10px; }
.pc-seg > i { position: absolute; inset: 0; background: var(--c); transform-origin: 0 50%; }
.pc-seg-uu { background: transparent; box-shadow: inset 0 0 0 1.5px #B9BCC6; border-radius: 7px; }

@media (max-width: 560px) {
  /* On a phone the case is its own composition, three piles by three, as wide as it is tall, so
     it fits the first screen under the headline with its count above it. */
  .pc-case-in { font-size: calc(100cqw / 400); padding-top: 40em; }
  .pc-handle { width: 120em; margin-left: -60em; height: 62em; border-width: 18em; border-radius: 28em 28em 0 0; }
  .pc-shell { border-radius: 52em; padding: 16em; }
  .pc-lining { border-radius: 38em; height: 316em; padding: 7em; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .pc-pile { padding: 5em; }
  .pc-pile-in { border-radius: 14em; padding: 9em 10em; }
  .pc-pile .pc-pile-name { font-size: max(12px, 14em); line-height: 1.12; }
  .pc-pile p { font-size: max(12px, 13em); }   /* readable on a 375-wide phone */
  .pc-pips { gap: 3em; padding-top: 5em; }
  .pc-pips i { width: 10em; height: 10em; border-radius: 3em; border-width: 1.8em; }
  .pc-pips i::after { inset: -1.8em; }
  .pc-p-clo { grid-column: 1; grid-row: 1; }
  .pc-p-toi { grid-column: 2; grid-row: 1; }
  .pc-p-doc { grid-column: 3; grid-row: 1; }
  .pc-p-mon { grid-column: 1; grid-row: 2; }
  .pc-p-ele { grid-column: 2; grid-row: 2; }
  .pc-p-med { grid-column: 3; grid-row: 2; }
  .pc-p-act { grid-column: 1; grid-row: 3; }
  .pc-p-oth { grid-column: 2; grid-row: 3; }
  .pc-p-uu  { grid-column: 3; grid-row: 3; }
  .pc-hero-case { display: flex; flex-direction: column; }
  .pc-case-under { order: -1; margin: 0 0 12px; flex-wrap: nowrap; }
  .pc-case-count { font-size: 24px; }
  .pc-trip-dates { display: none; }
  .pc-bar { height: 18px; margin-top: 12px; }
}
@media (max-width: 899px) {
  .pc-hero-stage { min-height: 0; padding: 96px 0 24px; }
  .pc-hero .k-hero-grid { gap: 22px; }
  .pc-hero .k-hero-head > * + * { margin-top: 14px; }
  .pc-hero-stage::before { right: -40vw; top: 40%; width: 120vw; height: 120vw; }
  .k-packcast .k-h1 { font-size: clamp(40px, 10.6vw, 60px); }
}

/* ---------- 2 · The weather writes the list ---------- */
.pc-build { background: linear-gradient(180deg, #FFFFFF 0%, var(--k-bg-2) 100%); }
.pc-build-visual { min-height: 0; }
.pc-chips { position: absolute; inset: 0; pointer-events: none; }
.pc-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 18px 40px -18px rgba(20,20,20,.35), 0 0 0 1px rgba(20,20,20,.06); font: 500 16px/1 var(--k-text); color: var(--k-ink); white-space: nowrap; }
.pc-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-chip-1 { right: calc(50% + var(--k-device-w) / 2 + 18px); left: auto; top: 24%; max-width: calc(50% - var(--k-device-w) / 2 + 38px); }
.pc-chip-2 { left: calc(50% + var(--k-device-w) / 2 + 18px); right: auto; top: 46%; max-width: calc(50% - var(--k-device-w) / 2 + (100vw - min(100vw, var(--k-max))) / 2 + 30px); }
.pc-chip-3 { left: calc(50% + var(--k-device-w) / 2 + 18px); right: auto; top: 66%; max-width: calc(50% - var(--k-device-w) / 2 + (100vw - min(100vw, var(--k-max))) / 2 + 30px); }
.pc-chip { width: max-content; white-space: normal; line-height: 1.25; }   /* each beside the phone, never over it; max-width does the limiting */
@media (max-width: 899px) {
  .pc-chips { display: none; }
}
/* without motion the chips sit in place; with it they arrive with step 3 */
html.k-motion .pc-chip { opacity: 0; }

/* ---------- 3 · The forecast changes ---------- */
.pc-forecast { background: var(--pc-lemon); }
.pc-forecast .k-eyebrow, .pc-forecast .k-body { color: #3A3812; }
.pc-poster-card { background: #FFFFFF; border-radius: 32px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(60, 55, 0, .45); max-width: 520px; justify-self: center; width: 100%; }
.pc-poster { background: var(--pc-lemon); padding: 26px 28px 22px; border-bottom: 1px solid rgba(20,20,20,.08); }
.pc-poster-top { font: 600 15px/1.2 var(--k-text); color: #4F4A0D; }
.pc-poster-name { font: 500 clamp(56px, 6vw, 84px)/1 var(--k-display); margin-top: 8px !important; }
.pc-poster-wx { position: relative; margin-top: 8px !important; min-height: 1.4em; font-size: 18px; }
.pc-wx { display: flex; align-items: flex-start; gap: 6px; }
.pc-wx b { white-space: nowrap; }   /* the temperature never splits */
.pc-wx svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-wx b { font-weight: 600; }
.pc-wx-was { position: absolute; left: 0; top: 0; opacity: 0; }
.pc-poster-dates { font-size: 15px; color: #4F4A0D; margin-top: 4px !important; }
.pc-rows { list-style: none; margin: 0; padding: 8px 0; }
.pc-row { display: flex; align-items: center; gap: 14px; padding: 14px 28px; position: relative; }
.pc-row + .pc-row { box-shadow: 0 -1px 0 rgba(20,20,20,.07); }
.pc-row > i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #BDBDC2; flex: none; }
.pc-row span { flex: 1; min-width: 0; display: grid; }
.pc-row b { font-weight: 500; font-size: 18px; }
.pc-row small { font: 600 13px/1 var(--k-text); padding: 3px 7px; border-radius: 6px; background: var(--k-ink); color: #fff; vertical-align: 2px; margin-left: 4px; }
.pc-row em { font-style: normal; font-size: 15px; color: var(--k-ink-2); display: inline-flex; align-items: center; gap: 5px; grid-area: 2 / 1; }
.pc-row em svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pc-row .pc-why-was { opacity: 0; }
.pc-remove { text-decoration: none; font: 500 14px/1 var(--k-text); padding: 8px 12px; border-radius: 999px; background: #EFEFF1; color: var(--k-ink); }

/* ---------- 4 · Months away ---------- */
.pc-months { background: var(--pc-night); color: #F3F4F7; overflow: hidden; }
.pc-months :where(h2) { color: #FFFFFF !important; }
.pc-months .k-eyebrow { color: var(--pc-lemon); }
.pc-months .k-body { color: #C6CCDA; }
.pc-months .k-body strong { color: #FFFFFF; }
.pc-months-word { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); white-space: nowrap; margin: 0;
  font: 500 clamp(140px, 24vw, 380px)/1 var(--k-display); color: rgba(235, 222, 52, .2); pointer-events: none; }
.pc-months .k-band-grid { position: relative; }

/* ---------- 5 · Packing ---------- */
.pc-pack { background: #FFFFFF; }

/* ---------- 6 · The list learns ---------- */
.pc-learn { background: var(--k-bg-2); }
.pc-unused { position: absolute; left: calc(50% + var(--k-device-w) / 2 + 18px); right: auto; bottom: 8%; display: grid; gap: 10px; width: 250px; max-width: calc(50% - var(--k-device-w) / 2 + (100vw - min(100vw, var(--k-max))) / 2 + 30px); padding: 44px 14px 14px;
  border: 3px dashed rgba(20,20,20,.22); border-radius: 28px; box-sizing: border-box; }
.pc-unused::before { content: attr(data-label); position: absolute; left: 18px; top: 14px; font: 600 13px/1 var(--k-text); letter-spacing: .1em; text-transform: uppercase; color: var(--k-ink-2); }
.pc-u { display: block; background: #FFFFFF; border-radius: 18px; padding: 14px 16px; font-size: 14px; color: var(--k-ink-2);
  box-shadow: 0 20px 40px -24px rgba(20,20,20,.4), 0 0 0 1px rgba(20,20,20,.06); }
.pc-u b { display: block; font-weight: 600; font-size: 16px; color: var(--k-ink); }
@media (max-width: 899px) { .pc-unused { display: none; } }

/* While you pack: the Toiletries pile beside the phone, ticking from 3 to 5 of 9 as on the two
   screens. Its count and its ticks agree at every point of the scroll. */
.pc-pilecard { position: absolute; right: calc(50% + var(--k-device-w) / 2 + 18px); left: auto; bottom: 10%; width: 232px; max-width: calc(50% - var(--k-device-w) / 2 + (100vw - min(100vw, var(--k-max))) / 2 + 30px); background: #FFFFFF; border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(20,20,20,.38), 0 0 0 1px rgba(20,20,20,.06); }
.pc-pilecard-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 14px 18px; background: #264F58; color: #FFFFFF; font-size: 15px; }
.pc-pilecard-head b { font-weight: 600; font-size: 17px; }
.pc-pilecard-head span { font-variant-numeric: tabular-nums; }
.pc-pilecard ul { list-style: none; margin: 0; padding: 10px 18px 14px; display: grid; gap: 7px; }
.pc-pilecard li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--k-ink); }
.pc-pilecard li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(20,20,20,.28);
  transition: background-color .2s ease, box-shadow .2s ease; }
.pc-pilecard li.is-on::before { background: #2FB8CF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: none; }
@media (max-width: 899px) { .pc-pilecard { display: none; } }
html.k-motion .pc-u { opacity: 0; }

/* ---------- 7 · Tiles ---------- */
.pc-more { background: #FFFFFF; }
.pc-tile-trips { background: var(--pc-lemon); box-shadow: none; }
.pc-tile-trips p { color: #3A3812; }
.pc-trips-art { margin-top: auto; display: grid; gap: 8px; padding-top: 16px; }
.pc-trips-art span { display: block; background: rgba(255,255,255,.75); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: #4F4A0D; }
.pc-trips-art b { display: block; font: 500 20px/1.2 var(--k-display); color: var(--k-ink); }
.pc-tile-weather { background: var(--pc-night); box-shadow: none; }
.pc-tile-weather :is(h3) { color: #FFFFFF !important; }
.pc-tile-weather p { color: #C6CCDA; }

/* ---------- 8–10 ---------- */
.pc-compare { background: var(--k-bg-2); }
.pc-plans-note { margin-top: 22px !important; max-width: 70ch; }
.pc-faq { background: #FFFFFF; }

/* ---------- 11 · Close ---------- */
.pc-close { background: var(--pc-lemon); }
.pc-close .k-lockup span span { color: #4F4A0D; }
.pc-close-nav { justify-content: center; margin-top: 40px; }
.pc-close-nav a { box-shadow: inset 0 0 0 1.5px rgba(20,20,20,.25); }

/* Colour behind the scene phones on big screens: the poster's lemon, the night of dark mode,
   the dashed pile of Usually unused. */
@media (min-width: 900px) {
  .pc-build-visual::before, .pc-pack .k-visual::before, .pc-learn-visual::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: min(560px, 92%); aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%); z-index: -1; }
  .pc-build-visual::before { background: var(--pc-lemon); }
  .pc-pack .k-visual::before { background: var(--pc-night); }
  .pc-learn-visual::before { background: var(--pc-lemon); opacity: .35; }
  .k-visual { isolation: isolate; }
}

/* What you'll be doing: the activities as the New trip sheet's chips */
.pc-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-acts li { padding: 8px 14px; border-radius: 999px; background: var(--k-bg-2); color: var(--k-ink); font-size: 15px; font-weight: 500; }
.pc-acts li:nth-child(3n+1) { background: var(--pc-lemon); }

/* The scenes' moments on a phone (.k-strip) */
.pc-strip .pc-sc, .pc-strip .pc-su { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(20,20,20,.08), 0 8px 18px -12px rgba(20,20,20,.35); font-size: 13px; font-weight: 500; color: var(--k-ink); }
.pc-strip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-strip > b { font: 600 12px/1 var(--k-text); letter-spacing: .08em; text-transform: uppercase; color: var(--k-ink-2); margin-right: 4px; }
.pc-strip-pile { gap: 10px; }
.pc-sp { display: inline-flex; gap: 4px; }
.pc-sp i { width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 2px #2FB8CF; transition: background-color .15s ease; }
.pc-sp i.on { background: #2FB8CF; }
.pc-strip-pile em { font-style: normal; font-size: 13px; color: var(--k-ink-2); font-variant-numeric: tabular-nums; }

.pc-sp-uu i { box-shadow: inset 0 0 0 2px #8E8E93; }
.pc-sp-uu i.on { background: #8E8E93; }
/* The night band on a phone: Chamonix as the band's header, sliding as you scroll */
@media (max-width: 899px) {
  .pc-months-word { position: relative; top: auto; transform: none; display: block; font-size: 19vw; line-height: .95; margin: 0 0 14px; padding-left: 16px;
    color: rgba(235, 222, 52, .3); }
}