/* LT UK, direction C: the Home page (the rules the pages share are in system.css) */

/* ---------- the part's colour and motif: shippo in its green ---------- */
.home-head .head-ground { background: color-mix(in srgb, var(--c-home) 11%, transparent); }
.home-head .hg-art { opacity: 0.16; }
.home-head .part-eyebrow { color: var(--t-home); }
.home-head .part-eyebrow .dot { background: var(--c-home); }
.page-home .how.ride-on .marker.is-on, .page-home .how.ride-on .marker.is-past { background: var(--c-home); border-color: var(--c-home); color: #1c1a18; }
.page-home .step-n { color: var(--t-home); }
.page-home .example .ex-h { color: #5c6b4b; }
.how-lede { margin: 0.4em 0 0; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.how-lede .go { color: var(--ink); }
@media (max-width: 759px) { .how.ride-on .how-lede { display: none; } }

/* ---------- a room, and a cupboard: two things to play ---------- */
.room-grid { display: grid; gap: 26px; }
.room-words p { max-width: 46ch; }
.cup { display: grid; gap: 18px; align-items: center; padding-top: 6px; }
.cup-demo { width: 100%; max-width: 300px; }
.cup .tada-frame { aspect-ratio: 3 / 4; }
.cup .tada-ctrl { flex-wrap: wrap; }
.cup .tada-seg { flex-basis: 100%; order: 2; }
.cup-words h3 { margin-bottom: 0.3em; }
.cup-words p { max-width: 36ch; margin-bottom: 0.5em; }
@media (max-width: 759px) { .room-demo, .move-demo { margin-right: 8px; } }
@media (max-width: 559px) { .room-demo .tada-ctrl { flex-wrap: wrap; } .room-demo .tada-seg { flex-basis: 100%; order: 2; } }
@media (min-width: 560px) and (max-width: 1099px) {
  .cup { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 30px; }
}
@media (min-width: 1100px) {
  .room-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: clamp(36px, 4.5vw, 80px); row-gap: 30px; align-items: start; }
  .room-demo { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .room-words { grid-column: 2; grid-row: 1; align-self: end; }
  .cup { grid-column: 2; grid-row: 2; grid-template-columns: 210px minmax(0, 1fr); column-gap: 22px; align-items: end; }
  .cup-words { padding-bottom: 54px; }
}

/* ---------- the family year: its worked examples ---------- */
.hx-cal li { position: relative; display: grid; grid-template-columns: 4.4em 1fr; gap: 8px; padding: 4px 0 4px 18px; border-top: 1px solid rgba(28, 26, 24, 0.1); }
.hx-cal li:first-child { border-top: 0; }
.hx-cal li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 9px; height: 9px; border-radius: 50%; background: var(--k, #7d8f69); }
.hx-cal b { color: #3f4a33; }
.k-school { --k: #7d8f69; } .k-bday { --k: #c4683a; } .k-renew { --k: #18223a; } .k-hol { --k: #b59a6e; }
.hx-reg table, .hx-short table { width: 100%; border-collapse: collapse; font-size: 0.94em; }
.hx-reg th, .hx-reg td, .hx-short th, .hx-short td { padding: 4px 6px; text-align: left; border-bottom: 1px solid rgba(28, 26, 24, 0.1); vertical-align: top; }
.hx-reg thead th, .hx-short thead th { font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: #55504a; }
.hx-reg tbody th, .hx-short tbody th { font-weight: 400; }
.hx-reg tbody tr:last-child > *, .hx-short tbody tr:last-child > * { border-bottom: 0; }
.hx-reg td:last-child { color: #3f4a33; font-weight: 700; }
.hx-files ul { display: grid; }
.hx-files li { display: grid; grid-template-columns: 1.9em 6.2em minmax(0, 1fr); align-items: baseline; gap: 4px 8px; padding: 4px 0; border-top: 1px dotted rgba(28, 26, 24, 0.3); }
.hx-files li:first-child { border-top: 0; }
.hx-files b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 4px; background: #7d8f69; color: #1c1a18; font-size: 0.82em; }
.hx-files i { color: #55504a; font-size: 0.92em; }
@media (prefers-reduced-motion: no-preference) {
  .ride-stop.is-on .hx-cal li, .ride-stop.is-on .hx-files li { animation: hx-in 0.6s var(--brake) backwards; }
  .ride-stop.is-on .hx-cal li:nth-child(2), .ride-stop.is-on .hx-files li:nth-child(2) { animation-delay: 0.36s; }
  .ride-stop.is-on .hx-cal li:nth-child(3), .ride-stop.is-on .hx-files li:nth-child(3) { animation-delay: 0.42s; }
  .ride-stop.is-on .hx-cal li:nth-child(4), .ride-stop.is-on .hx-files li:nth-child(4) { animation-delay: 0.48s; }
  .ride-stop.is-on .hx-cal li:nth-child(5), .ride-stop.is-on .hx-files li:nth-child(5) { animation-delay: 0.54s; }
  .ride-stop.is-on .hx-cal li:nth-child(6), .ride-stop.is-on .hx-files li:nth-child(6) { animation-delay: 0.6s; }
  .ride-stop.is-on .hx-cal li:first-child, .ride-stop.is-on .hx-files li:first-child { animation-delay: 0.3s; }
  @keyframes hx-in { from { opacity: 0; transform: translateX(10px); } }
}
/* the papers' picture stays for the third step: the register and the papers live together */
.home-year.ride-on .ride-stage[data-step="2"] .how-pic[data-s="1"] { clip-path: inset(0 0 0 0); transform: none; opacity: 1; z-index: 1; }

/* ---------- a move: the worked example, her words and the on-site day ---------- */
.move-grid { display: grid; gap: 30px; align-items: start; }
.move-words p { max-width: 46ch; }
.hx-move { max-width: 560px; padding: 20px 22px; }
.hx-move ol { display: grid; gap: 0; }
.hx-move li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid rgba(28, 26, 24, 0.12); }
.hx-move li:first-child { border-top: 0; padding-top: 2px; }
.hx-move b { grid-row: span 2; display: grid; place-items: center; align-self: start; min-height: 2.2em; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, #7d8f69 26%, #ffffff); color: #2f3826; font-size: 0.86em; white-space: nowrap; }
.mv-when { font-weight: 700; }
.mv-reno { margin: 8px 0 0; padding-top: 12px; border-top: 1.5px solid rgba(28, 26, 24, 0.3); font-style: italic; }
.move-card .cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.hq { margin: 22px 0 0; padding: 20px 24px; border-radius: 20px; background: var(--indigo); color: var(--on-indigo); max-width: 480px; }
.hq figcaption { font: 700 0.72rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: #ffb685; margin-bottom: 8px; }
.hq blockquote { margin: 0; }
.hq p { margin: 0; font: italic 400 clamp(1.1rem, 1rem + 0.4vw, 1.3rem)/1.45 var(--body); }
@media (min-width: 760px) and (max-width: 1099px) {
  .move-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; }
  .move-words { grid-column: 1 / -1; }
  .move-demo { grid-column: 1; }
  .move-card { grid-column: 2; }
  .move-words p { max-width: 60ch; }
}
@media (min-width: 1100px) {
  .move-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 0.9fr); column-gap: clamp(40px, 4vw, 70px); }
  .move-demo { grid-column: 1; grid-row: 1; }
  .move-words { grid-column: 2; grid-row: 1; }
  .move-card { grid-column: 3; grid-row: 1; }
}

/* ---------- a celebration: its worked examples ---------- */
.hx-short td.ok { color: #3f5a2c; font-weight: 700; white-space: nowrap; }
.hx-short td.wait { color: #8a4a1e; font-style: italic; }
.hx-short td:nth-child(2) { white-space: nowrap; }
.hx-run ol { display: grid; }
.hx-run li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(28, 26, 24, 0.1); }
.hx-run li:first-child { border-top: 0; }
.hx-run b { color: #3f4a33; }
.hx-who ul { display: grid; }
.hx-who li { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: 10px; padding: 5px 0; border-top: 1px solid rgba(28, 26, 24, 0.1); }
.hx-who li:first-child { border-top: 0; }
.hx-who li:last-child { margin-top: 4px; padding-top: 8px; border-top: 1.5px dashed rgba(28, 26, 24, 0.35); }
.hx-who li:last-child span { font-style: italic; }

@media (min-width: 760px) { .home-prices .after-cards .plink { grid-column: auto; min-height: 240px; } }
@media (min-width: 1100px) { .home-prices .after-cards { grid-template-columns: 1fr 1.2fr; } }
/* the held steps, tighter on a phone and a tablet so one step fits with its picture */
@media (max-width: 1099px) {
  .how.ride-on .hx-cal li, .how.ride-on .hx-run li, .how.ride-on .hx-who li, .how.ride-on .hx-files li { padding-block: 2px; }
  .how.ride-on .hx-reg th, .how.ride-on .hx-reg td, .how.ride-on .hx-short th, .how.ride-on .hx-short td { padding-block: 2px; }
}
@media (max-width: 459px) {
  .hx-files li { grid-template-columns: 1.9em minmax(0, 1fr); }
  .hx-files i { grid-column: 2; }
  .how.ride-on .hx-files i { display: none; }
  .hx-who li { grid-template-columns: 7em minmax(0, 1fr); }
}