/* ==========================================================================
   Shmo Leads, round 2 look 2: Toast of the Town
   Local Celebrity, marshmallow style: your company is the toast of the town.
   Golden hour by the fire. Honey to ember to plum skies for the art, cream
   marshmallow paper for reading, graham and toast accents, a little sparkle.
   Every selector sits under body.lk-toast. Classes and keyframes use tt-.

   How this file is built (the winner becomes the site's system):
     1. Tokens        Shmo family palette, toast scale, shape, type, dialog vars
     2. Base          type defaults, wrap, focus, skip link
     3. Components    buttons, headings, swipes, eyebrow, tags, Sample sticker,
                      hand notes, market form, campfire, toast toy
     4. Header        Shmocard lockup, the rolling marshmallow
     5. Sections      hero (the campfire ring), trust (graham board), trap (log
                      post clipping), how (three toasting stages), machine (hanging
                      s'mores menu), who (sign, poster, billboard), proof (receipts
                      and string lights), team (campfire circle), check, footer
     6. Dialogs       market check, booking, lightbox
     7. Motion        keyframes, off-screen pause, reduced motion
   The page runs from afternoon to night: cream, graham, golden, sunset, then
   the campfire sections after dark, and a cream footer in the morning.
   Spacing scale: 4 8 12 16 20 24 32 40 48 56 64 80 96 120.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
body.lk-toast {
  /* the Shmo family (Shmocard tokens) */
  --tt-mallow: #FFFBF1;       /* marshmallow paper */
  --tt-cream: #FFF8EA;
  --tt-graham-soft: #FFE0C2;
  --tt-graham: #E89A1A;       /* graham gold */
  --tt-honey: #FFB833;
  --tt-ember: #FF5B1F;        /* primary button, cocoa text on it (4.9:1) */
  --tt-cherry: #E04210;
  --tt-choc: #6B3A1E;
  --tt-ink: #3B1F14;          /* cocoa deep */
  --tt-ink-2: #5C3B28;        /* body text: 9.4:1 on cream */
  --tt-ink-3: #7A5A46;        /* placeholders, fine print: 5.9:1 on cream */
  --tt-muted: #8A6E5A;
  --tt-ember-tint: #FFF1E5;
  --tt-clover: #2A7F3E;
  --tt-plum: #3A2342;
  --tt-dusk: #1A1430;
  --tt-night: #0B0D1A;
  --tt-hand-ink: #B8360A;     /* hand notes on cream: 5.6:1 */
  --tt-night-ink: #F6E9DA;    /* reading text after dark: 14:1 on dusk */
  --tt-night-ink-2: #E6CDB8;

  /* the toast scale: raw to perfect */
  --tt-toast-0: #FFFDF6;
  --tt-toast-1: #FBD9A0;
  --tt-toast-2: #F2B563;
  --tt-toast-3: #E08F37;
  --tt-toast-4: #B8632A;
  --tt-wood: #8B4E2B;
  --tt-wood-lt: #C98A4B;

  /* shape */
  --tt-line: 2.5px solid var(--tt-ink);
  --tt-pop: 4px 4px 0 var(--tt-ink);
  --tt-pop-lg: 8px 8px 0 var(--tt-ink);
  --tt-pop-honey: 6px 6px 0 0 var(--tt-honey), 6px 6px 0 2.5px var(--tt-ink);
  --tt-r1: 12px;
  --tt-r2: 20px;
  --tt-r3: 28px;
  --tt-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tt-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tt-firelight: 0 0 0 1px rgba(255, 184, 51, 0.25), 0 24px 70px -10px rgba(255, 128, 40, 0.5);

  /* type */
  --tt-display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --tt-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tt-hand: "Shadows Into Light Two", "Marker Felt", cursive;
  --tt-mark: "Cherry Bomb One", "Fredoka", system-ui, sans-serif;
  --tt-fs-h2: clamp(2rem, 1.25rem + 2.3vw, 3.25rem);

  /* layout */
  --tt-header-h: 76px;
  --tt-pad-y: clamp(64px, 8vw, 120px);
  --tt-gutter: clamp(16px, 3.2vw, 40px);

  /* shared dialogs (css/core.css) */
  --sl-font-body: var(--tt-body);
  --sl-font-display: var(--tt-display);
  --sl-bg: #FFF8EA;
  --sl-ink: #3B1F14;
  --sl-muted: #5C3B28;
  --sl-surface: #FFFBF1;
  --sl-surface-ink: #3B1F14;
  --sl-field-bg: #FFFFFF;
  --sl-field-ink: #3B1F14;
  --sl-line: 2.5px solid #3B1F14;
  --sl-radius: 26px;
  --sl-shadow: 8px 8px 0 #3B1F14;
  --sl-accent: #FF5B1F;
  --sl-accent-ink: #3B1F14;
  --sl-good: #2A7F3E;
  --sl-warn: #B8360A;
  --sl-focus: #3B1F14;
  --sl-backdrop: rgba(26, 20, 48, 0.62);

  margin: 0;
  background: var(--tt-cream);
  color: var(--tt-ink);
  font-family: var(--tt-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 640px) {
  body.lk-toast { --tt-header-h: 62px; font-size: 1rem; }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
:root:has(> body.lk-toast) { scroll-padding-top: 96px; }
@media (max-width: 640px) { :root:has(> body.lk-toast) { scroll-padding-top: 78px; } }

.lk-toast main { overflow-x: clip; }
.lk-toast section { position: relative; }
.lk-toast h1, .lk-toast h2, .lk-toast h3, .lk-toast h4 { margin: 0; }
.lk-toast p { margin: 0; text-wrap: pretty; }
.lk-toast figure { margin: 0; }
.lk-toast a { color: inherit; }
.lk-toast :focus-visible { outline: 3px solid var(--tt-ink); outline-offset: 3px; }
.lk-toast .tt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.lk-toast .tt-wrap {
  width: 100%;
  max-width: calc(1280px + 2 * var(--tt-gutter));
  margin-inline: auto;
  padding-inline: var(--tt-gutter);
}

.lk-toast .tt-skip {
  position: absolute;
  z-index: 100;
  top: -80px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--tt-ink);
  color: var(--tt-cream);
  font-weight: 800;
  text-decoration: none;
}
.lk-toast .tt-skip:focus { top: 12px; }

/* ==========================================================================
   3. Components
   ========================================================================== */

/* ---------- buttons: the Shmo ember button with a chunky cocoa shadow ---------- */
.lk-toast .btn {
  min-height: 52px;
  padding: 0 1.5em;
  border-radius: 999px;
  font-family: var(--tt-body);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  transition: transform 0.2s var(--tt-spring), box-shadow 0.2s var(--tt-spring), background-color 0.15s, border-color 0.15s;
}
.lk-toast .btn-primary {
  border: var(--tt-line);
  background-color: var(--tt-ember);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 55%);
  color: var(--tt-ink);
  box-shadow: var(--tt-pop);
}
.lk-toast .btn-primary:hover { background-color: #FF6B33; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tt-ink); }
.lk-toast .btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tt-ink); }
.lk-toast .btn-ghost {
  border: 2.5px solid rgba(59, 31, 20, 0.4);
  background: transparent;
  color: var(--tt-ink);
}
.lk-toast .btn-ghost:hover { border-color: var(--tt-ink); background: rgba(59, 31, 20, 0.05); }

/* ---------- headings ---------- */
.lk-toast .tt-h2 {
  font-family: var(--tt-display);
  font-size: var(--tt-fs-h2);
  font-weight: 700;
  font-stretch: 96%;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.lk-toast .tt-sechead { max-width: 46rem; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.lk-toast .tt-lede { margin-top: 16px; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem); color: var(--tt-ink-2); }

/* the honey highlighter swipe (Shmo Software style) */
.lk-toast .tt-swipe {
  padding: 0 0.08em;
  white-space: nowrap;
  background: linear-gradient(180deg, transparent 50%, var(--tt-honey) 50%, var(--tt-honey) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lk-toast .tt-swipe--night { background: linear-gradient(180deg, transparent 54%, rgba(255, 91, 31, 0.85) 54%, rgba(255, 91, 31, 0.85) 92%, transparent 92%); }

/* ---------- eyebrow (the audience line voice) ---------- */
.lk-toast .tt-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tt-ink-2);
}
.lk-toast .tt-eyebrow svg { flex: none; width: 22px; height: 22px; }
.lk-toast .tt-eyebrow--night { color: var(--tt-night-ink-2); }

/* ---------- Sample sticker on every drawn mock ---------- */
.lk-toast .tt-sample {
  display: inline-block;
  padding: 5px 12px 4px;
  border: 2px solid var(--tt-ink);
  border-radius: 999px;
  background: var(--tt-mallow);
  color: var(--tt-ink);
  font-family: var(--tt-body);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--tt-ink);
  rotate: 5deg;
}

/* ---------- hand notes ---------- */
.lk-toast .tt-hand {
  font-family: var(--tt-hand);
  font-weight: 400;
  font-synthesis: none;
  color: var(--tt-hand-ink);
  line-height: 1.1;
}

/* ---------- the market form (hero and the campfire card share it) ---------- */
.lk-toast .tt-mform {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
  padding: 16px 20px 20px;
  border: var(--tt-line);
  border-radius: 22px;
  background: linear-gradient(180deg, #FFE9C8 0%, #FFF6E6 16%, var(--tt-mallow) 34%);
  box-shadow: var(--tt-pop-honey);
}
.lk-toast .mf-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
  font-family: var(--tt-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--tt-ink);
}
.lk-toast .mf-head::before {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  margin: -6px -2px -6px 0;
  /* icon pack #3: a toasted marshmallow on a roasting stick (ChatGPT, Jeff 2026-09-29; source in assets-src/icons) */
  background: url("../../assets/icons/icon-roast-stick-96.webp") center / contain no-repeat;
}
.lk-toast .mf-field { min-width: 0; }
.lk-toast .mf-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tt-ink-2);
  white-space: nowrap;
}
.lk-toast .market-form select,
.lk-toast .market-form input {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: var(--tt-line);
  border-radius: 14px;
  background-color: #FFFFFF;
  color: var(--tt-ink);
  font-family: var(--tt-body);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: inset 0 3px 0 rgba(59, 31, 20, 0.06);
  transition: box-shadow 0.18s, border-color 0.18s, background-color 0.18s;
}
.lk-toast .market-form select {
  padding-right: 42px;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.8 1.8L8 8l6.2-6.2' fill='none' stroke='%233B1F14' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px 10px;
}
.lk-toast .market-form select:not(.has-value) { color: var(--tt-ink-3); font-weight: 500; }
.lk-toast .market-form select option { color: var(--tt-ink); font-weight: 500; }
.lk-toast .market-form input { letter-spacing: 0.05em; }
.lk-toast .market-form input::placeholder { color: var(--tt-ink-3); opacity: 1; font-weight: 500; }
.lk-toast .market-form select:hover,
.lk-toast .market-form input:hover { background-color: #FFFCF6; }
.lk-toast .market-form select:focus,
.lk-toast .market-form input:focus { border-color: var(--tt-ink); box-shadow: 0 0 0 4px rgba(255, 184, 51, 0.6); }
.lk-toast .market-form [aria-invalid="true"] { border-color: var(--tt-cherry); background-color: #FFF4EE; }
.lk-toast .tt-mform .btn { min-height: 54px; padding: 0 1.3em; }
.lk-toast .tt-mform .market-err { grid-column: 1 / -1; margin: 2px 0 0; color: var(--tt-hand-ink); }

/* the free note under the forms */
.lk-toast .tt-free {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--tt-ink-2);
}
.lk-toast .tt-free strong { color: var(--tt-ink); font-weight: 800; }
.lk-toast .tt-free svg { flex: none; width: 20px; height: 20px; margin-top: 0; }

/* ---------- the campfire (inline SVG, shared by hero, team and check) ---------- */
.lk-toast .tt-fire__coals { fill: #FFC24D; opacity: 0.85; }
.lk-toast .tt-fire__glowring { fill: rgba(255, 150, 50, 0.22); }
.lk-toast .tt-fire__stones ellipse { fill: #7E6679; stroke: var(--tt-ink); stroke-width: 2.6; }
.lk-toast .tt-fire__stones--front ellipse { fill: #947A8C; }
.lk-toast .tt-fire__logs rect { fill: var(--tt-wood); stroke: var(--tt-ink); stroke-width: 3; }
.lk-toast .tt-fire__end { fill: #F1C58E; stroke: var(--tt-ink); stroke-width: 2.4; }
.lk-toast .tt-flame { stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; }
.lk-toast .tt-flame--out { fill: var(--tt-ember); stroke: var(--tt-ink); stroke-width: 3.4; animation: tt-flick-a 1.5s ease-in-out infinite; }
.lk-toast .tt-flame--mid { fill: var(--tt-honey); animation: tt-flick-b 1.15s ease-in-out infinite; }
.lk-toast .tt-flame--core { fill: #FFF1C4; animation: tt-flick-c 0.9s ease-in-out infinite; }
.lk-toast .tt-sparks { position: absolute; left: 50%; bottom: 40%; width: 0; height: 0; }
.lk-toast .tt-sparks i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFE7A8;
  box-shadow: 0 0 6px 2px rgba(255, 160, 50, 0.85);
  opacity: 0;
  animation: tt-spark 3.2s linear infinite;
}
.lk-toast .tt-sparks i:nth-child(1) { --sx: -26px; --sy: -150px; animation-delay: -0.3s; }
.lk-toast .tt-sparks i:nth-child(2) { --sx: 22px; --sy: -170px; animation-delay: -1.2s; animation-duration: 3.8s; }
.lk-toast .tt-sparks i:nth-child(3) { --sx: -8px; --sy: -130px; animation-delay: -2s; animation-duration: 2.7s; }
.lk-toast .tt-sparks i:nth-child(4) { --sx: 36px; --sy: -120px; animation-delay: -2.6s; }
.lk-toast .tt-sparks i:nth-child(5) { --sx: -40px; --sy: -110px; animation-delay: -1.6s; animation-duration: 3.6s; }
.lk-toast .tt-sparks i:nth-child(6) { --sx: 10px; --sy: -190px; animation-delay: -0.9s; animation-duration: 4.1s; }

/* ---------- the toast toy: tap to toast Shmello (raw, golden, toasted, on fire, out) ---------- */
.lk-toast .tt-toy__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  padding: 0;
  border: 0;
  border-radius: 28%;
  background: none;
  cursor: pointer;
  translate: -50% -50%;
  -webkit-tap-highlight-color: transparent;
}
.lk-toast .tt-toy__btn::before { content: ""; position: absolute; inset: -14%; border-radius: 30%; }
.lk-toast .tt-toy__img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
  translate: -50% 0;
  transform-origin: 50% 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: filter 0.3s;
}
.lk-toast .tt-toy[data-step="3"] .tt-toy__img { width: 154%; }
.lk-toast .tt-toy[data-step="4"] .tt-toy__img { width: 176%; }
.lk-toast .tt-toy.is-bump .tt-toy__img { animation: tt-squish 0.5s var(--tt-spring); }
.lk-toast .tt-toy__btn:hover .tt-toy__img { filter: drop-shadow(0 0 10px rgba(255, 200, 90, 0.9)); }
.lk-toast .tt-toy__btn:focus-visible { outline-offset: 6px; }
.lk-toast .tt-toy.is-puff .tt-toy__btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 70%;
  width: 90%;
  height: 90%;
  margin-left: -45%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 60%, rgba(230, 220, 214, 0.95) 0 22%, transparent 23%),
    radial-gradient(circle at 60% 40%, rgba(240, 232, 226, 0.95) 0 26%, transparent 27%),
    radial-gradient(circle at 70% 70%, rgba(220, 210, 204, 0.9) 0 18%, transparent 19%);
  pointer-events: none;
  animation: tt-puff 0.9s ease-out both;
}

/* ==========================================================================
   4. Header: the Shmocard lockup, pill nav, and a marshmallow rolling on the edge
   ========================================================================== */
.lk-toast .tt-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: var(--tt-line);
  background: rgba(255, 248, 234, 0.94);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.lk-toast .tt-header__in {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tt-header-h);
}
/* LOGO: the Shmocard lockup (s'more icon, "Shmo" cocoa, "Leads" ember, Cherry Bomb One) */
.lk-toast .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  padding: 6px 0;
  color: var(--tt-ink);
  text-decoration: none;
  white-space: nowrap;
}
.lk-toast .brand img { flex: none; display: block; width: 32px; height: 34px; }
.lk-toast .brand-mark {
  display: inline-flex;
  gap: 0.2em;
  font-family: var(--tt-mark);
  font-size: 26px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: -0.01em;
}
.lk-toast .brand-mark span { font-weight: 400; font-synthesis: none; }
.lk-toast .brand-mark span:first-child { color: var(--tt-ink); }
.lk-toast .brand-mark span:last-child { color: var(--tt-ember); }
.lk-toast .brand:hover img { animation: tt-wiggle 0.6s var(--tt-spring); }

.lk-toast .nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-weight: 700;
  color: var(--tt-ink);
  text-decoration: none;
}
/* the scribbly ember underline from the Shmo family menus, drawn in on hover */
.lk-toast .nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M0 3.5Q5 0 10 3.5T20 3.5' fill='none' stroke='%23FF5B1F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 20px 7px repeat-x;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s var(--tt-ease);
}
.lk-toast .nav-links a:hover::after { clip-path: inset(0 0 0 0); }
.lk-toast .tt-header .btn-primary { min-height: 48px; }
.lk-toast .tt-toggle { display: none; }

/* the rolling marshmallow: it sits on the header's bottom edge, behind the menu,
   and its roll and toast follow the scroll (js/looks/toast.js sets --x, --r, --t) */
.lk-toast .tt-roll { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
.lk-toast .tt-roll__mm {
  --x: 12px;
  --r: 0deg;
  --t: 0;
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 22px;
  height: 22px;
  transform: translateX(var(--x)) rotate(var(--r));
  will-change: transform;
}
.lk-toast .tt-roll__mm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lk-toast .tt-roll__gold { opacity: var(--t); }

@media (min-width: 1081px) {
  .lk-toast .nav-links { display: flex; gap: 2px; margin-right: 12px; }
}
@media (max-width: 1080px) {
  .lk-toast .tt-header .btn-primary {
    min-height: 44px;
    padding: 0 1em;
    font-size: 0.95rem;
    box-shadow: 3px 3px 0 var(--tt-ink);
  }
  .lk-toast .tt-header .btn-primary { order: 1; }
  .lk-toast .tt-toggle {
    order: 2;
    display: inline-grid;
    place-content: center;
    gap: 5px;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: var(--tt-line);
    border-radius: 50%;
    background: var(--tt-mallow);
    box-shadow: 3px 3px 0 var(--tt-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lk-toast .tt-toggle span {
    display: block;
    width: 18px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--tt-ink);
    transition: transform 0.25s var(--tt-ease), opacity 0.2s;
  }
  body.lk-toast.menu-open .tt-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.lk-toast.menu-open .tt-toggle span:nth-child(2) { opacity: 0; }
  body.lk-toast.menu-open .tt-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .lk-toast .nav-links {
    position: absolute;
    top: calc(100% + 14px);
    left: var(--tt-gutter);
    right: var(--tt-gutter);
    display: grid;
    padding: 10px 20px;
    border: var(--tt-line);
    border-radius: var(--tt-r2);
    background: linear-gradient(180deg, #FFE9C8 0%, var(--tt-mallow) 18%);
    box-shadow: var(--tt-pop-honey);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .lk-toast .nav-links.open { opacity: 1; }
  .lk-toast .nav-links a::after { left: 4px; right: auto; width: 40%; bottom: 10px; }
  .lk-toast .nav-links a {
    min-height: 58px;
    padding: 0 4px;
    border-bottom: 2px dotted rgba(59, 31, 20, 0.22);
    font-family: var(--tt-display);
    font-size: 1.45rem;
    font-weight: 600;
    transform: none;
  }
  .lk-toast .nav-links a:last-child { border-bottom: 0; }
}
/* no JS: nothing can open the drawer, so the four links show as a second row of the bar */
@media (max-width: 1080px) {
  html:not(.js) .lk-toast .tt-header { position: relative; }
  html:not(.js) .lk-toast .tt-header__in { flex-wrap: wrap; padding-bottom: 6px; }
  html:not(.js) .lk-toast .tt-toggle { display: none; }
  html:not(.js) .lk-toast .nav-links {
    position: static;
    order: 3;
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 4px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
  }
  html:not(.js) .lk-toast .nav-links,
  html:not(.js) .lk-toast .nav-links * { visibility: visible !important; pointer-events: auto !important; }
  html:not(.js) .lk-toast .nav-links a { min-height: 44px; padding: 0 10px; border: 0; font-family: var(--tt-body); font-size: 0.95rem; font-weight: 700; }
}
html:not(.js) .lk-toast .tt-ribbon__btn { display: none; }
@media (max-width: 640px) {
  .lk-toast .brand { gap: 7px; }
  .lk-toast .brand img { width: 28px; height: 30px; }
  .lk-toast .brand-mark { font-size: 21px; }
  .lk-toast .tt-header__in { gap: 8px; }
  .lk-toast .tt-header .btn-primary { padding: 0 0.85em; font-size: 0.88rem; }
  .lk-toast .tt-roll { display: none; }
}
@media (max-width: 359px) {
  .lk-toast .brand-mark { font-size: 18px; }
  .lk-toast .tt-header .btn-primary { padding: 0 0.7em; font-size: 0.82rem; }
}

/* ==========================================================================
   5. Sections
   ========================================================================== */

/* ---------- 5.1 Hero: golden hour, twelve marshmallows around your campfire ---------- */
.lk-toast .tt-hero {
  overflow: clip;
  padding: clamp(22px, 3.6vh, 46px) 0 clamp(52px, 4.6vw, 72px);
  background:
    radial-gradient(760px 560px at 80% 56%, rgba(255, 184, 51, 0.36), rgba(255, 184, 51, 0) 70%),
    radial-gradient(520px 420px at 100% 4%, rgba(255, 91, 31, 0.13), transparent 70%),
    radial-gradient(420px 320px at 0% 100%, rgba(255, 184, 51, 0.16), transparent 70%),
    linear-gradient(180deg, #FFF8EA 0%, #FFF3DE 60%, #FFEBCB 100%);
}
/* a soft cream hill closes the golden hour into the reading paper below */
.lk-toast .tt-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(28px, 4vw, 56px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C200 10 420 8 640 26S1100 58 1440 20V60Z' fill='%23FFF8EA'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.lk-toast .tt-hero__glow { position: absolute; inset: 0; pointer-events: none; }
.lk-toast .tt-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.4vw, 68px);
}
.lk-toast .tt-hero__copy { container-type: inline-size; min-width: 0; }
.lk-toast .tt-h1 {
  margin: 16px 0 20px;
  font-family: var(--tt-display);
  font-size: clamp(2.1rem, 10.3cqi, 4.35rem);
  font-weight: 700;
  font-stretch: 94%;
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--tt-ink);
}
.lk-toast .tt-h1__l { display: block; white-space: nowrap; }
/* "first call": cherry type with a honey toast underline */
.lk-toast .tt-toast {
  position: relative;
  color: var(--tt-cherry);
  white-space: nowrap;
}
.lk-toast .tt-toast::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.04em;
  right: -0.06em;
  bottom: -0.1em;
  height: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10C40 3 70 13 104 8S168 4 197 8' fill='none' stroke='%23FFB833' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.lk-toast .tt-h1 { isolation: isolate; }
.lk-toast .tt-hero__sub {
  max-width: 34em;
  margin-bottom: 24px;
  font-size: clamp(1.02rem, 0.92rem + 0.34vw, 1.18rem);
  line-height: 1.5;
  color: var(--tt-ink-2);
}
.lk-toast .tt-lead { color: var(--tt-ink); font-weight: 700; }
.lk-toast .tt-hero__after {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 22px;
}
.lk-toast .tt-hero__after .btn-ghost { flex: none; min-height: 48px; }

/* the scene */
.lk-toast .tt-hero__art { position: relative; min-width: 0; }
.lk-toast .tt-scene { position: relative; margin: 30px 8px 12px 30px; }
.lk-toast .tt-scene__art { position: relative; aspect-ratio: 600 / 580; }
.lk-toast .tt-scene__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.lk-toast .tt-scene__shadow { fill: var(--tt-ink); }
.lk-toast .tt-scene__frame-ink { fill: none; stroke: var(--tt-ink); stroke-width: 24; }
.lk-toast .tt-scene__frame { fill: none; stroke-width: 15; }
.lk-toast .tt-scene__stitch { fill: none; stroke: rgba(232, 146, 46, 0.55); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; }
.lk-toast .tt-rays { fill: #FFF3C8; opacity: 0.42; transform-box: view-box; transform-origin: 300px 402px; animation: tt-rays 80s linear infinite; }
.lk-toast .tt-sun { filter: drop-shadow(0 0 18px rgba(255, 244, 200, 0.9)); }
.lk-toast .tt-cloud__bob { animation: tt-cloud 9s ease-in-out infinite; }
.lk-toast .tt-cloud--b .tt-cloud__bob { animation-duration: 11s; animation-delay: -4s; }
.lk-toast .tt-skyline { fill: #A2505B; }
.lk-toast .tt-skyline__lit { fill: #FFD27A; }
.lk-toast .tt-ground__rim { fill: none; stroke: #8E4764; stroke-width: 3; }
.lk-toast .tt-scene__glow { animation: tt-glow 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lk-toast .tt-sticks path { fill: none; stroke: var(--tt-ink); stroke-width: 8.5; stroke-linecap: round; }
.lk-toast .tt-sticks--wood path { stroke: var(--tt-wood-lt); stroke-width: 4; }
.lk-toast .tt-flag__cloth { transform-box: fill-box; transform-origin: 100% 50%; animation: tt-flag 2.6s ease-in-out infinite; }
.lk-toast .tt-flag__text { font-family: var(--tt-display); font-size: 17.5px; font-weight: 700; fill: var(--tt-ink); }
.lk-toast .tt-glints use { fill: #FFFDF2; transform-box: fill-box; transform-origin: center; animation: tt-twinkle 3.4s ease-in-out infinite; }
.lk-toast .tt-glints use:nth-child(2) { animation-delay: -1.1s; }
.lk-toast .tt-glints use:nth-child(3) { animation-delay: -2.2s; }
.lk-toast .tt-glints use:nth-child(4) { animation-delay: -0.6s; }

/* the ring of marshmallows (real Shmello art, raw and toasted, crossfaded) */
.lk-toast .tt-ring { position: absolute; inset: 0; }
.lk-toast .tt-mm {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.lk-toast .tt-mm img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 0 rgba(59, 31, 20, 0.25));
}
.lk-toast .tt-mm__gold { opacity: 0; transition: opacity 0.45s ease; }
.lk-toast .tt-mm__raw { transition: opacity 0.35s ease 0.18s; }
.lk-toast .tt-mm.is-gold .tt-mm__gold { opacity: 1; }
.lk-toast .tt-mm.is-gold .tt-mm__raw { opacity: 0; }
.lk-toast .tt-mm.is-fresh img { animation: tt-hop 0.62s var(--tt-spring); }
/* the rewound first paint (html.tt-rw: set in the head, cleared by toast.js once it has rewound):
   the eight that will toast paint raw with the crossfade off, and the meter reads 3 */
html.tt-rw .lk-toast .tt-mm[data-order] img { transition: none; }
html.tt-rw .lk-toast .tt-mm[data-order] .tt-mm__gold { opacity: 0; }
html.tt-rw .lk-toast .tt-mm[data-order] .tt-mm__raw { opacity: 1; }
html.tt-rw .lk-toast .tt-tick:nth-child(n+4) { fill: #FFFDF6; transition: none; }
html.tt-rw .lk-toast .tt-meter__num { font-size: 0; }
html.tt-rw .lk-toast .tt-meter__num::after { content: "3"; font-size: 32cqi; }
.lk-toast .tt-mm::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -30%;
  width: 56%;
  height: 56%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12C16.4 12.9 12.9 16.4 12 24C11.1 16.4 7.6 12.9 0 12C7.6 11.1 11.1 7.6 12 0Z' fill='%23FFF6D6' stroke='%233B1F14' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}
.lk-toast .tt-mm.is-fresh::after { animation: tt-sparkle 0.8s ease-out; }
.lk-toast .tt-mm::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, 0.85), rgba(255, 184, 51, 0) 72%);
  opacity: 0;
  pointer-events: none;
}
.lk-toast .tt-mm.is-fresh::before { animation: tt-halo 0.9s ease-out; }

/* the raw one, on purpose: the hero's tap-to-toast toy */
.lk-toast .tt-toy--ring {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.lk-toast .tt-toy--ring .tt-toy__img { filter: drop-shadow(0 2px 0 rgba(59, 31, 20, 0.25)); }

/* banner: a wooden sign hung from the top of the arch */
.lk-toast .tt-banner {
  position: absolute;
  z-index: 2;
  top: 5.6%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 20px 9px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 12px;
  background:
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(0, 0, 0, 0.1) 9px 10px),
    linear-gradient(180deg, #86502C, #6B3A1E);
  box-shadow: 3px 3px 0 var(--tt-ink);
  color: var(--tt-cream);
  text-align: center;
  white-space: nowrap;
  translate: -50% 0;
  transform-origin: 50% -30px;
  animation: tt-sway 5.5s ease-in-out infinite;
}
.lk-toast .tt-banner::before,
.lk-toast .tt-banner::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 2.5px;
  height: 32px;
  background: var(--tt-ink);
}
.lk-toast .tt-banner::before { left: 22%; }
.lk-toast .tt-banner::after { right: 22%; }
.lk-toast .tt-banner__city {
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tt-honey);
}
.lk-toast .tt-banner__line {
  font-family: var(--tt-display);
  font-size: clamp(0.95rem, 0.6rem + 0.7vw, 1.28rem);
  font-weight: 600;
  line-height: 1.1;
}

/* the toast meter: a dial of twelve little marshmallows */
.lk-toast .tt-meter {
  position: absolute;
  z-index: 4;
  top: -4.5%;
  left: -6.5%;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 26%;
  aspect-ratio: 1;
  container-type: inline-size;
  text-align: center;
  color: var(--tt-ink);
  rotate: -7deg;
}
.lk-toast .tt-meter__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(3px 4px 0 var(--tt-ink)); }
.lk-toast .tt-meter__rim { fill: var(--tt-choc); stroke: var(--tt-ink); stroke-width: 3; }
.lk-toast .tt-meter__face { fill: var(--tt-mallow); stroke: var(--tt-ink); stroke-width: 2.4; }
.lk-toast .tt-tick { fill: #FFFDF6; stroke: var(--tt-ink); stroke-width: 1.8; transition: fill 0.3s; }
.lk-toast .tt-tick.is-on { fill: var(--tt-toast-3); }
.lk-toast .tt-meter__top,
.lk-toast .tt-meter__bot {
  position: relative;
  font-size: max(10px, 8.4cqi);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lk-toast .tt-meter__top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  translate: -50% -58%;
  padding: 3px 8px 2px;
  border: 2px solid var(--tt-ink);
  border-radius: 999px;
  background: var(--tt-honey);
  box-shadow: 2px 2px 0 var(--tt-ink);
  font-size: max(10px, 7.2cqi);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.lk-toast .tt-meter__num {
  position: relative;
  display: block;
  margin-top: 4cqi;
  font-family: var(--tt-display);
  font-size: 32cqi;
  font-weight: 700;
  line-height: 0.92;
  color: var(--tt-ink);
}
.lk-toast .tt-meter__num.is-bump { animation: tt-bump 0.42s var(--tt-spring); }
.lk-toast .tt-meter__name {
  position: absolute;
  left: 50%;
  bottom: -1%;
  translate: -50% 0;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--tt-mallow);
  font-family: var(--tt-hand);
  font-size: max(11px, 9.5cqi);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--tt-hand-ink);
}
.lk-toast .tt-scene__sample { position: absolute; z-index: 3; right: 3%; bottom: -1.5%; }

/* hand notes around the scene */
.lk-toast .tt-hand--tap,
.lk-toast .tt-hand--next {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font-size: 1.35rem;
  white-space: nowrap;
  pointer-events: none;
}
.lk-toast .tt-hand svg { flex: none; width: 56px; height: 32px; color: var(--tt-hand-ink); }
/* "tap me" only shows where the art sits under the form (phones and tablets): beside the form on a
   laptop it would pull the eye off the ask, and the pointer below owns that gap */
.lk-toast .tt-hand--tap { display: none; }
/* "then the next city" curls back into the art, toward the sign and the meter, never off the page */
.lk-toast .tt-hand--next { right: -3%; top: -1%; rotate: 5deg; align-items: flex-start; }
.lk-toast .tt-hand--next svg { rotate: -14deg; margin: 12px -2px 0 0; width: 48px; }
.lk-toast .tt-scene.is-done .tt-hand--tap { animation: tt-nudge 0.9s var(--tt-spring) 2; }

/* laptops: a toasted Shmello stands in the gap beside the form and points at it */
.lk-toast .tt-formwrap { position: relative; }
.lk-toast .tt-point {
  position: absolute;
  z-index: 2;
  left: calc(100% + 14px);
  top: 50%;
  width: clamp(64px, 5.8vw, 88px);
  height: auto;
  translate: 0 -38%;
  pointer-events: none;
}
/* phones and tablets: Shmello peeks over the top edge of the form card (behind it, so the card
   hides his ledge), on the right, clear of the heading */
.lk-toast .tt-formpeek { display: none; }
/* when the ring is done, the one left raw gives a little wiggle: he is the one you can tap */
.lk-toast .tt-scene.is-done .tt-toy--ring:not([data-step]) .tt-toy__img { animation: tt-wiggle 0.7s var(--tt-spring) 0.2s 2; }

/* embers drift off the fire toward the form */
.lk-toast .tt-embers { position: absolute; z-index: 5; left: 50%; top: 62%; width: 0; height: 0; pointer-events: none; --ex: 1; }
.lk-toast .tt-embers i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFE7A8;
  box-shadow: 0 0 6px 2px rgba(255, 160, 50, 0.85), 0 0 14px 4px rgba(255, 91, 31, 0.3);
  opacity: 0;
  animation: tt-ember var(--d) var(--dl) linear infinite;
}

@media (min-width: 1000px) and (max-width: 1279px) {
  .lk-toast .tt-hand--next { top: -5%; right: -2%; font-size: 1.1rem; }
  .lk-toast .tt-hand--next svg { width: 36px; height: 24px; }
}
@media (min-width: 1000px) and (max-width: 1179px) {
  .lk-toast .tt-mform { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .lk-toast .tt-mform .btn { grid-column: 1 / -1; }
}
@media (max-width: 999px) {
  .lk-toast .tt-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lk-toast .tt-hero__art { width: 100%; max-width: 620px; margin: 0 auto; }
  .lk-toast .tt-scene { margin: 52px 4px 26px 4px; }
  .lk-toast .tt-meter { left: -1%; top: -5%; width: 24%; }
  .lk-toast .tt-hand--next { right: 0; top: -8%; }
  .lk-toast .tt-embers { --ex: 0.35; }
  .lk-toast .tt-point { display: none; }
  .lk-toast .tt-hero__sub { margin-bottom: 36px; }
  .lk-toast .tt-formwrap { isolation: isolate; }
  .lk-toast .tt-formpeek {
    position: absolute;
    z-index: -1;
    display: block;
    right: 22px;
    bottom: 100%;
    width: 76px;
    height: auto;
    margin-bottom: -15px;
    pointer-events: none;
  }
  .lk-toast .tt-mform { z-index: 0; }
  /* the signpost for the one left raw: a little tag above him, just outside the arch */
  .lk-toast .tt-hand--tap {
    display: flex;
    left: 1%;
    top: 29%;
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.12rem;
    rotate: -6deg;
  }
  .lk-toast .tt-hand--tap span { padding: 1px 6px 2px; border: 1.5px solid rgba(184, 54, 10, 0.45); border-radius: 8px; background: var(--tt-mallow); }
  .lk-toast .tt-hand--tap svg { scale: -1 1; rotate: 62deg; margin: 0 0 0 12px; width: 44px; height: 26px; }
}
@media (max-width: 640px) {
  .lk-toast .tt-hero { padding-top: 14px; padding-bottom: 60px; }
  .lk-toast .tt-hero__aud { font-size: 0.84rem; gap: 7px; }
  .lk-toast .tt-hero__aud svg { width: 18px; height: 18px; }
  .lk-toast .tt-h1 { margin: 10px 0 12px; font-size: clamp(1.95rem, 11.2cqi, 3rem); font-stretch: 90%; line-height: 1.02; }
  .lk-toast .tt-hero__sub { margin-bottom: 30px; font-size: 0.98rem; line-height: 1.45; }
  .lk-toast .tt-mform { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 8px 10px; padding: 12px 12px 14px; border-radius: 18px; box-shadow: 5px 5px 0 0 var(--tt-honey), 5px 5px 0 2.5px var(--tt-ink); }
  .lk-toast .tt-mform .btn { grid-column: 1 / -1; min-height: 52px; }
  .lk-toast .mf-head { font-size: 1.08rem; margin-bottom: 0; }
  .lk-toast .mf-head::before { width: 28px; height: 28px; margin: -5px -2px -5px 0; }
  .lk-toast .mf-field label { margin-bottom: 4px; font-size: 0.75rem; }
  .lk-toast .market-form select, .lk-toast .market-form input { min-height: 50px; padding: 0 12px; border-radius: 12px; }
  .lk-toast .market-form select { padding-right: 34px; background-position: right 12px center; background-size: 13px 9px; }
  .lk-toast .tt-hero__after { flex-wrap: wrap; margin-top: 16px; }
  .lk-toast .tt-free { font-size: 0.9rem; }
  .lk-toast .tt-scene { margin: 56px 0 22px; }
  .lk-toast .tt-meter { left: 1.5%; top: -6.5%; width: 28%; }
  .lk-toast .tt-formpeek { width: 66px; right: 16px; margin-bottom: -13px; }
  .lk-toast .tt-banner { top: 4.4%; padding: 4px 12px 6px; }
  .lk-toast .tt-banner::before, .lk-toast .tt-banner::after { height: 20px; }
  .lk-toast .tt-banner__city { font-size: 0.625rem; letter-spacing: 0.16em; }
  .lk-toast .tt-banner__line { font-size: 0.82rem; }
  .lk-toast .tt-hand { font-size: 1.12rem; }
  .lk-toast .tt-hand--next { top: -9%; right: 0; font-size: 1.08rem; }
  .lk-toast .tt-hand--next svg { width: 38px; height: 24px; }
  .lk-toast .tt-hand--tap { font-size: 1.02rem; }
  .lk-toast .tt-scene__sample { font-size: 0.6rem; padding: 4px 9px 3px; }
}

/* ---------- 5.2 Trust: the machine by the numbers, one graham cracker board by the fire ----------
   One wide s'more: a chocolate bar across the top carries the line, four marshmallows toasted along
   their tops carry the figures, and the s'more gives it a thumbs up from the corner. */
.lk-toast .tt-trust { padding: clamp(20px, 2.4vw, 36px) 0 var(--tt-pad-y); background: var(--tt-cream); }
.lk-toast .tt-board {
  --bp: clamp(14px, 1.8vw, 24px);
  position: relative;
  max-width: 1120px;
  margin: 72px auto 0;
  padding: 0 var(--bp) var(--bp);
  border: 3px solid var(--tt-ink);
  border-radius: 24px;
  background-color: #EFB877;
  background-image:
    radial-gradient(circle, rgba(122, 69, 34, 0.5) 0 2.1px, transparent 2.7px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%, rgba(122, 69, 34, 0.12));
  background-size: 26px 26px, 100% 100%;
  background-position: 13px 13px, 0 0;
  box-shadow: var(--tt-pop-lg), 0 30px 80px -20px rgba(255, 140, 40, 0.45);
}
/* the chocolate bar: its squares are the grooves, the line sits in the middle */
.lk-toast .tt-board__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 calc(-1 * var(--bp)) clamp(16px, 2vw, 22px);
  padding: 17px 24px 16px;
  border-bottom: 3px solid var(--tt-ink);
  border-radius: 21px 21px 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(0, 0, 0, 0.22) 62px 64px),
    linear-gradient(180deg, #7C4526 0%, var(--tt-choc) 60%, #5A2F17 100%);
  color: var(--tt-cream);
  font-family: var(--tt-display);
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.lk-toast .tt-board__head svg { flex: none; width: 24px; height: 24px; }
.lk-toast .tt-board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
/* each figure sits on a marshmallow, toasted along the top */
.lk-toast .tt-fig {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 16px 24px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--tt-toast-2) 0, var(--tt-toast-1) 12px, #FFF3DF 28px, var(--tt-mallow) 56px);
  box-shadow: 0 4px 0 rgba(59, 31, 20, 0.3);
  text-align: center;
}
/* icon pack (ChatGPT, Jeff 2026-09-29): one icon over each figure, one shared height, wide ones keep their shape */
.lk-toast .tt-fig__ico { display: block; width: auto; max-width: 100%; height: 52px; margin: -8px 0 2px; object-fit: contain; }
.lk-toast .tt-fig__ico--sq { height: 62px; margin: -13px 0 -3px; }
.lk-toast .tt-fig__num {
  font-family: var(--tt-display);
  font-size: clamp(2.4rem, 1.7rem + 1.7vw, 3.3rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--tt-ink);
  white-space: nowrap;
}
.lk-toast .tt-fig__num--word { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.7rem); line-height: 1.1; }
.lk-toast .tt-fig__label { max-width: 13em; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--tt-ink); text-wrap: balance; }
.lk-toast .tt-board__smore { position: absolute; z-index: 2; right: 30px; bottom: calc(100% - 12px); width: 118px; height: auto; }
@media (max-width: 860px) {
  .lk-toast .tt-board__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-toast .tt-board { max-width: 640px; }
}
@media (max-width: 640px) {
  .lk-toast .tt-board { margin-top: 64px; border-radius: 20px; box-shadow: 6px 6px 0 var(--tt-ink); }
  .lk-toast .tt-board__head { gap: 10px; padding: 14px 14px 13px; font-size: 1.14rem; border-radius: 17px 17px 0 0; }
  .lk-toast .tt-board__head svg { width: 19px; height: 19px; }
  .lk-toast .tt-board__list { gap: 10px; }
  .lk-toast .tt-fig { gap: 6px; padding: 24px 10px 16px; border-radius: 16px; }
  .lk-toast .tt-fig__num { font-size: 2.2rem; }
  .lk-toast .tt-fig__num--word { font-size: 1.7rem; }
  .lk-toast .tt-fig__label { font-size: 0.92rem; }
  .lk-toast .tt-fig__ico { height: 40px; margin: -6px 0 0; }
  .lk-toast .tt-fig__ico--sq { height: 48px; margin: -10px 0 -2px; }
  .lk-toast .tt-board__smore { width: 92px; right: 14px; }
}

/* ---------- 5.3 The trap: a gossip clipping pinned to a log post ---------- */
.lk-toast .tt-trap {
  padding: var(--tt-pad-y) 0;
  background:
    radial-gradient(600px 400px at 80% 30%, rgba(255, 255, 255, 0.4), transparent 70%),
    var(--tt-graham-soft);
}
.lk-toast .tt-trap::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 18px;
  background: radial-gradient(circle at 14px 0, var(--tt-cream) 13px, transparent 13.6px) 0 0 / 28px 18px repeat-x;
  pointer-events: none;
}
.lk-toast .tt-trap__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.lk-toast .tt-trap .tt-h2 { max-width: 12em; }
.lk-toast .tt-trap__body { margin: 22px 0 40px; max-width: 32em; font-size: clamp(1.05rem, 0.96rem + 0.3vw, 1.18rem); color: var(--tt-ink-2); }
.lk-toast .tt-turn {
  position: relative;
  max-width: 34rem;
  padding: 26px 110px 24px 28px;
  border: var(--tt-line);
  border-radius: var(--tt-r2);
  background: linear-gradient(180deg, var(--tt-toast-2) 0, var(--tt-toast-1) 10px, #FFF4E2 26px, var(--tt-mallow) 52px);
  box-shadow: var(--tt-pop-honey);
}
.lk-toast .tt-turn__smore { position: absolute; right: -24px; top: -46px; width: 124px; height: auto; }
/* superhero Shmello's gold shield holds off the storm: the one-company-per-trade promise */
.lk-toast .tt-turn__shield { right: -34px; top: -62px; width: 136px; }
.lk-toast .tt-turn__big {
  font-family: var(--tt-display);
  font-size: clamp(1.45rem, 1rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.lk-toast .tt-turn__small { margin-top: 12px; font-size: 1.08rem; color: var(--tt-ink-2); }

.lk-toast .tt-post { position: relative; padding: 56px 0 44px; }
.lk-toast .tt-post__log {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: -30px;
  width: 42%;
  translate: -50% 0;
  border: 3px solid var(--tt-ink);
  border-radius: 20px 20px 8px 8px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 17px, rgba(255, 255, 255, 0.07) 17px 19px, transparent 19px 29px),
    linear-gradient(90deg, #5E3219 0%, #8B5230 30%, #9A5E38 55%, #7A4424 80%, #5A2F17 100%);
  box-shadow: 8px 8px 0 rgba(59, 31, 20, 0.25);
}
.lk-toast .tt-post__top {
  position: absolute;
  left: -3px;
  right: -3px;
  top: -22px;
  height: 44px;
  border: 3px solid var(--tt-ink);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #C98A4B 0 8%, #F1C58E 9% 22%, #D9A266 23% 36%, #F1C58E 37% 52%, #D9A266 53% 66%, #F1C58E 67%);
}
.lk-toast .tt-clip { position: relative; rotate: -1.2deg; padding: 28px clamp(18px, 2.6vw, 30px) 34px; filter: drop-shadow(10px 12px 0 rgba(59, 31, 20, 0.2)); }
.lk-toast .tt-clip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #FBF5E9;
  background-image:
    linear-gradient(90deg, rgba(59, 31, 20, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 40%);
  background-size: 50% 100%, 100% 100%;
  clip-path: polygon(0 0.5%, 2.5% 0.9%, 4.8% 0.8%, 7.8% 0.1%, 11% 0.1%, 14.1% 0.1%, 16.4% 0.6%, 20.3% 0.2%, 22.9% 0.9%, 27% 0.8%, 30% 1.4%, 32.3% 1.2%, 35.1% 0.2%, 37.5% 0.4%, 41.4% 0.3%, 44.7% 0.9%, 47.7% 0.8%, 50% 0.1%, 52.6% 1%, 55.7% 0.4%, 59% 0.6%, 61.8% 1.1%, 65.4% 0.3%, 68.8% 0.7%, 72.7% 1%, 75.5% 1.4%, 78% 0.6%, 81.7% 0.2%, 84.8% 0.1%, 88.4% 1.1%, 91.7% 1.2%, 94.6% 1%, 97.9% 0.8%, 100% 1%, 100% 98.6%, 96.9% 99%, 94.5% 98.9%, 91% 98.5%, 87.2% 99.6%, 84.2% 99%, 82% 99.3%, 79.4% 99.8%, 77.1% 98.8%, 74.7% 99.6%, 71.7% 98.7%, 69.3% 99.3%, 66% 98.7%, 62.2% 98.7%, 59.4% 99.4%, 56.5% 98.7%, 52.4% 99.8%, 49.8% 99.7%, 47.2% 99.3%, 43.8% 99.6%, 41.6% 99.4%, 38.6% 99.2%, 34.5% 99%, 31.3% 99.1%, 27.8% 99.9%, 23.8% 98.8%, 19.8% 98.8%, 16.8% 99.4%, 14.4% 99%, 12.1% 99.9%, 9.5% 99.8%, 6.6% 99.9%, 4.4% 99.8%, 2% 99.5%, 0 99%);
}
.lk-toast .tt-clip__mast { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lk-toast .tt-spotted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 12px;
  border-radius: 6px;
  background: var(--tt-ink);
  color: var(--tt-honey);
  font-family: var(--tt-display);
  font-size: 1.4rem;
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  rotate: -3deg;
  box-shadow: 3px 3px 0 var(--tt-ember);
}
.lk-toast .tt-spotted svg { width: 22px; height: 22px; fill: var(--tt-cream); }
.lk-toast .tt-clip__rule { flex: 1; height: 7px; border-top: 3px solid var(--tt-ink); border-bottom: 1.5px solid var(--tt-ink); }
.lk-toast .tt-clip__photo {
  position: relative;
  overflow: hidden;
  border: var(--tt-line);
  border-radius: 8px;
  aspect-ratio: 16 / 8.2;
  background:
    radial-gradient(60% 90% at 50% 100%, rgba(255, 184, 51, 0.55), transparent 70%),
    linear-gradient(180deg, #4B2848 0%, #3A2342 60%, #2C1932 100%);
}
.lk-toast .tt-clip__photo img { position: absolute; left: 50%; bottom: 2%; width: 66%; height: auto; translate: -50% 0; filter: sepia(0.12); }
.lk-toast .tt-clip__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(59, 31, 20, 0.14) 0.7px, transparent 1.2px) 0 0 / 4px 4px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.lk-toast .tt-roster { position: relative; margin-top: 18px; }
.lk-toast .tt-roster__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--tt-ink);
}
.lk-toast .tt-roster__title { font-family: var(--tt-display); font-size: 1.32rem; font-weight: 700; line-height: 1.1; }
.lk-toast .tt-roster__chip {
  padding: 5px 12px;
  border: 2px solid var(--tt-ink);
  border-radius: 999px;
  background: var(--tt-honey);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}
.lk-toast .tt-roster__rows { list-style: none; margin: 6px 0 0; padding: 0; }
.lk-toast .tt-roster__rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 12px;
  border-bottom: 1.5px dashed rgba(59, 31, 20, 0.22);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}
.lk-toast .tt-roster__rows li.is-you { margin: 6px 0 12px; border: 2px solid var(--tt-ink); border-radius: 12px; background: #FFE7C4; font-weight: 800; }
.lk-toast .tt-roster__av { flex: none; width: 26px; height: 26px; }
.lk-toast .tt-roster__flag {
  margin: 26px 0 0 auto;
  width: max-content;
  font-family: var(--tt-hand);
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--tt-hand-ink);
  rotate: -3deg;
}
.lk-toast .tt-roster__ring {
  position: absolute;
  left: -34px;
  top: 92px;
  width: calc(100% + 58px);
  height: 184px;
  overflow: visible;
  pointer-events: none;
}
.lk-toast .tt-roster__ring path { fill: none; stroke: var(--tt-cherry); stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.85; }
.lk-toast .tt-clip__sample { position: absolute; top: 24px; right: 22px; }
.lk-toast .tt-tack {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFB894 0 18%, var(--tt-ember) 45%, var(--tt-cherry) 100%);
  box-shadow: 2px 3px 0 rgba(59, 31, 20, 0.35);
}
@media (max-width: 999px) {
  .lk-toast .tt-trap__grid { grid-template-columns: minmax(0, 1fr); }
  .lk-toast .tt-post { max-width: 600px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .lk-toast .tt-clip { rotate: -0.8deg; padding: 26px 16px 30px; }
  .lk-toast .tt-turn { padding: 22px 20px 20px; margin-top: 58px; }
  .lk-toast .tt-turn__smore { right: -6px; top: -64px; width: 96px; }
  .lk-toast .tt-turn__shield { right: -2px; top: -72px; width: 104px; }
  .lk-toast .tt-spotted { font-size: 1.1rem; }
  .lk-toast .tt-roster__title { font-size: 1.12rem; }
  .lk-toast .tt-roster__rows li { gap: 10px; padding: 6px 8px; font-size: 0.95rem; }
  .lk-toast .tt-roster__flag { font-size: 1.35rem; }
  .lk-toast .tt-roster__ring { display: none; }
  .lk-toast .tt-roster__rows li:not(.is-you) { border-left: 4px solid var(--tt-cherry); }
  .lk-toast .tt-clip__sample { top: 20px; right: 14px; }
  .lk-toast .tt-post { padding-top: 48px; }
  .lk-toast .tt-post__log { width: 50%; }
}

/* ---------- 5.4 How it works: three toasting stages on one stick ---------- */
.lk-toast .tt-how { padding: var(--tt-pad-y) 0; background: var(--tt-cream); }
.lk-toast .tt-how::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 18px;
  background: radial-gradient(circle at 14px 0, var(--tt-graham-soft) 13px, transparent 13.6px) 0 0 / 28px 18px repeat-x;
  pointer-events: none;
}
.lk-toast .tt-stages {
  --plate: clamp(170px, 16vw, 216px);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
}
/* the roasting stick runs through all three plates: a graham grip, then a sharpened tip */
.lk-toast .tt-stages::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(36px + var(--plate) / 2 - 7px);
  left: -1%;
  right: 3%;
  height: 14px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 8px 2px 2px 8px;
  background: linear-gradient(180deg, #D9A266 0%, var(--tt-wood-lt) 45%, #9C6435 100%);
  clip-path: polygon(0 -20%, 99% -20%, 100% 50%, 99% 120%, 0 120%);
}
.lk-toast .tt-stages::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(36px + var(--plate) / 2 - 13px);
  left: -1.5%;
  width: 70px;
  height: 26px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 13px;
  background: repeating-linear-gradient(90deg, #E7B77E 0 8px, #D9A266 8px 10px);
  box-shadow: 3px 3px 0 var(--tt-ink);
}
.lk-toast .tt-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lk-toast .tt-stage__plate {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--plate);
  aspect-ratio: 1;
  border: 3px solid var(--tt-ink);
  border-radius: 50%;
  box-shadow: 6px 6px 0 var(--tt-ink);
}
.lk-toast .tt-stage__plate img { width: 60%; height: auto; }
.lk-toast .tt-stage--raw .tt-stage__plate {
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 20%, var(--tt-mallow) 50%, #F4E6D2 100%);
}
.lk-toast .tt-stage--gold .tt-stage__plate {
  background: radial-gradient(circle at 35% 30%, #FFF1C4 0 18%, #FFCF6E 55%, var(--tt-honey) 100%);
  box-shadow: 6px 6px 0 var(--tt-ink), 0 0 0 12px rgba(255, 184, 51, 0.18), 0 10px 60px rgba(255, 150, 40, 0.35);
}
.lk-toast .tt-stage--smore .tt-stage__plate {
  background: radial-gradient(circle at 35% 30%, #FFD9A8 0 16%, #FF9C5A 55%, var(--tt-ember) 100%);
  box-shadow: 6px 6px 0 var(--tt-ink), 0 0 0 14px rgba(255, 91, 31, 0.16), 0 14px 70px rgba(255, 91, 31, 0.45);
}
.lk-toast .tt-stage--smore .tt-stage__plate img { width: 72%; }
.lk-toast .tt-stage__label {
  position: absolute;
  z-index: 1;
  top: -16px;
  left: 50%;
  padding: 5px 14px 6px;
  border: 2px solid var(--tt-ink);
  border-radius: 999px;
  background: var(--tt-mallow);
  font-family: var(--tt-hand);
  font-size: 1.15rem;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  white-space: nowrap;
  color: var(--tt-ink);
  translate: -50% 0;
  rotate: -3deg;
}
.lk-toast .tt-stage--gold .tt-stage__label { rotate: 2deg; background: #FFF1C4; }
.lk-toast .tt-stage--smore .tt-stage__label { rotate: -2deg; background: var(--tt-ember-tint); }
.lk-toast .tt-stage__words { max-width: 22em; margin-top: 30px; }
.lk-toast .tt-stage__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--tt-display);
  font-size: clamp(1.3rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}
.lk-toast .tt-stage__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--tt-toast-2) 0 30%, var(--tt-mallow) 30%);
  font-family: var(--tt-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  padding-top: 7px;
}
.lk-toast .tt-stage__text { margin-top: 10px; font-size: 1.04rem; line-height: 1.52; color: var(--tt-ink-2); }
.lk-toast .tt-encore { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: clamp(52px, 6vw, 84px); text-align: center; }
/* Shmello stretches like taffy between two graham ledges and a mini marshmallow hops across:
   more of your city, then on to the next one */
.lk-toast .tt-encore__bridge { display: block; width: clamp(210px, 22vw, 300px); height: auto; margin-bottom: -10px; }
.lk-toast .tt-encore__line {
  font-family: var(--tt-display);
  font-size: clamp(1.9rem, 1rem + 3vw, 3.6rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lk-toast .tt-encore .btn,
.lk-toast .tt-who__go .btn { min-height: 56px; padding: 0 1.8em; font-size: 1.1rem; }
@media (max-width: 860px) {
  .lk-toast .tt-stages { --plate: 124px; grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 16px; }
  .lk-toast .tt-stages::before { top: 0; bottom: 40px; left: calc(var(--plate) / 2 - 7px); right: auto; width: 14px; height: auto; border-radius: 8px 8px 2px 2px; clip-path: polygon(-20% 0, 120% 0, 120% 98%, 50% 100%, -20% 98%); }
  .lk-toast .tt-stages::after { top: -18px; left: calc(var(--plate) / 2 - 13px); width: 26px; height: 56px; background: repeating-linear-gradient(180deg, #E7B77E 0 8px, #D9A266 8px 10px); }
  .lk-toast .tt-stage { flex-direction: row; align-items: center; gap: 18px; text-align: left; }
  .lk-toast .tt-stage__plate { flex: none; box-shadow: 4px 4px 0 var(--tt-ink); }
  .lk-toast .tt-stage--gold .tt-stage__plate { box-shadow: 4px 4px 0 var(--tt-ink), 0 0 0 8px rgba(255, 184, 51, 0.2); }
  .lk-toast .tt-stage--smore .tt-stage__plate { box-shadow: 4px 4px 0 var(--tt-ink), 0 0 0 8px rgba(255, 91, 31, 0.16); }
  .lk-toast .tt-stage__label { font-size: 0.95rem; padding: 4px 10px 5px; top: -12px; }
  .lk-toast .tt-stage--smore .tt-stage__label { left: -2px; translate: 0 0; }
  .lk-toast .tt-stage__words { margin-top: 0; }
  .lk-toast .tt-stage__title { flex-direction: row; justify-content: flex-start; font-size: 1.24rem; gap: 8px; }
  .lk-toast .tt-stage__n { width: 30px; height: 30px; font-size: 0.95rem; padding-top: 5px; border-radius: 9px; }
  .lk-toast .tt-stage__text { font-size: 0.98rem; margin-top: 6px; }
}
@media (max-width: 400px) {
  .lk-toast .tt-stages { --plate: 104px; }
  .lk-toast .tt-stage { gap: 14px; }
  .lk-toast .tt-stage__title { font-size: 1.14rem; }
  .lk-toast .tt-stage__label { font-size: 0.86rem; }
  .lk-toast .tt-stage--smore .tt-stage__label { left: 0; padding: 4px 7px 5px; font-size: 0.8rem; }
}

/* ---------- 5.5 The machine: the hanging s'mores menu board ---------- */
.lk-toast .tt-machine {
  padding: calc(var(--tt-pad-y) - 16px) 0 clamp(56px, 6vw, 88px);
  background: linear-gradient(180deg, var(--tt-cream) 0%, #FFEDCC 22%, #FFE1AE 100%);
}
.lk-toast .tt-menu { position: relative; max-width: 1120px; margin: 0 auto; padding-top: 74px; }
.lk-toast .tt-menu__rig { position: absolute; inset: 0 0 auto; height: 80px; pointer-events: none; }
.lk-toast .tt-menu__beam {
  position: absolute;
  top: 0;
  left: -3%;
  right: -3%;
  height: 26px;
  border: 3px solid var(--tt-ink);
  border-radius: 13px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 38px),
    linear-gradient(180deg, #A0643A 0%, var(--tt-wood) 55%, #6E3C21 100%);
  box-shadow: 0 6px 0 rgba(59, 31, 20, 0.22);
}
.lk-toast .tt-menu__rope {
  position: absolute;
  top: 20px;
  width: 7px;
  height: 60px;
  border: 2px solid var(--tt-ink);
  border-radius: 4px;
  background: repeating-linear-gradient(160deg, #E7C08A 0 4px, #C99A5E 4px 7px);
}
.lk-toast .tt-menu__rope--l { left: 14%; }
.lk-toast .tt-menu__rope--r { right: 14%; }
.lk-toast .tt-lantern { position: absolute; top: 20px; right: -44px; width: 34px; height: 92px; transform-origin: 50% 0; animation: tt-sway 4.6s ease-in-out infinite; }
.lk-toast .tt-lantern::before { content: ""; position: absolute; left: 50%; top: 0; width: 2.5px; height: 36px; margin-left: -1.25px; background: var(--tt-ink); }
.lk-toast .tt-lantern i {
  position: absolute;
  left: 0;
  top: 34px;
  width: 34px;
  height: 48px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 10px 10px 12px 12px;
  background: radial-gradient(circle at 50% 60%, #FFF6D0 0 20%, #FFD166 45%, var(--tt-honey) 100%);
  box-shadow: 0 0 30px 8px rgba(255, 184, 51, 0.55);
  animation: tt-glow 2.4s ease-in-out infinite;
}
.lk-toast .tt-lantern i::before { content: ""; position: absolute; left: 4px; right: 4px; top: -9px; height: 9px; border: 2.5px solid var(--tt-ink); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--tt-choc); }
.lk-toast .tt-menu__board {
  position: relative;
  padding: 0 clamp(12px, 2.2vw, 26px) clamp(12px, 2.2vw, 26px);
  border: 3px solid var(--tt-ink);
  border-radius: 28px;
  background:
    repeating-linear-gradient(180deg, transparent 0 64px, rgba(0, 0, 0, 0.22) 64px 66px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 23px),
    linear-gradient(180deg, #7C4526 0%, var(--tt-choc) 40%, #5A2F17 100%);
  box-shadow: 10px 10px 0 var(--tt-ink), 0 40px 90px -30px rgba(255, 130, 40, 0.5);
  transform-origin: 50% -60px;
}
.lk-toast .tt-menu.in .tt-menu__board { animation: tt-swing 2.4s var(--tt-ease) 0.15s both; }
.lk-toast .tt-menu__board::before,
.lk-toast .tt-menu__board::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F6E2C2, #C9A57A);
}
.lk-toast .tt-menu__board::before { left: calc(14% - 4px); }
.lk-toast .tt-menu__board::after { right: calc(14% - 4px); }
.lk-toast .tt-menu__top { padding: clamp(30px, 3.4vw, 44px) 16px clamp(22px, 2.4vw, 30px); text-align: center; color: var(--tt-cream); }
.lk-toast .tt-menu__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--tt-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tt-honey);
}
.lk-toast .tt-menu__kicker span { width: 44px; height: 2px; background: currentColor; opacity: 0.7; }
.lk-toast .tt-menu__title { margin: 12px auto 0; max-width: 17em; color: #FFF8EA; }
.lk-toast .tt-menu__paper {
  position: relative;
  padding: clamp(22px, 3.4vw, 46px) clamp(18px, 3.4vw, 46px) clamp(18px, 3vw, 40px);
  border: var(--tt-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.9), transparent 50%),
    var(--tt-mallow);
  box-shadow: inset 0 0 0 6px rgba(232, 154, 26, 0.12);
}
.lk-toast .tt-menu__intro { max-width: 38em; margin: 0 auto; font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); text-align: center; color: var(--tt-ink-2); }
.lk-toast .tt-menu__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 2.5px dashed rgba(59, 31, 20, 0.3);
}
.lk-toast .tt-menu__col { min-width: 0; }
.lk-toast .tt-menu__col:first-child { padding-right: clamp(20px, 3vw, 46px); }
.lk-toast .tt-menu__col + .tt-menu__col { padding-left: clamp(20px, 3vw, 46px); border-left: 2px dotted rgba(59, 31, 20, 0.25); }
.lk-toast .tt-course + .tt-course { margin-top: 30px; }
.lk-toast .tt-course__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 10px;
  border: 2px solid var(--tt-ink);
  border-radius: 999px;
  font-family: var(--tt-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 3px 3px 0 var(--tt-ink);
}
.lk-toast .tt-course__label svg { flex: none; width: 22px; height: 22px; }
.lk-toast .tt-course--one .tt-course__label { background: var(--tt-mallow); }
.lk-toast .tt-course--two .tt-course__label { background: #FFE1B0; }
.lk-toast .tt-course--boost .tt-course__label { background: #FFD0B0; }
.lk-toast .tt-course__list { list-style: none; margin: 6px 0 0; padding: 0; }
.lk-toast .tt-dish { position: relative; padding: 18px 0 20px; border-bottom: 1.5px dashed rgba(59, 31, 20, 0.18); }
.lk-toast .tt-course__list .tt-dish:last-child { border-bottom: 0; padding-bottom: 6px; }
.lk-toast .tt-dish__row { display: flex; align-items: flex-end; gap: 10px; }
/* icon pack (ChatGPT, Jeff 2026-09-29): one small service icon before every dish name */
.lk-toast .tt-dish__ico { flex: none; align-self: center; width: 44px; height: 44px; margin: -8px -2px -8px -4px; }
.lk-toast .tt-dish__name { flex: 0 1 auto; font-family: var(--tt-display); font-size: 1.38rem; font-weight: 600; line-height: 1.1; }
.lk-toast .tt-dish__dots { flex: 1 1 24px; min-width: 24px; margin-bottom: 6px; border-bottom: 3px dotted rgba(59, 31, 20, 0.42); }
/* the "price" is a little marshmallow that toasts darker down the menu */
.lk-toast .tt-dish__no {
  flex: none;
  display: grid;
  place-items: end center;
  width: 44px;
  height: 36px;
  padding-bottom: 3px;
  border: 2px solid var(--tt-ink);
  border-radius: 10px 10px 12px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tt-toast-4) calc(var(--toast, 0) * 100%), var(--tt-toast-1)) 0 32%, var(--tt-mallow) 32%);
  font-family: var(--tt-display);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tt-ink);
}
.lk-toast .tt-dish__text { margin-top: 8px; font-size: 1rem; line-height: 1.52; color: var(--tt-ink-2); }
.lk-toast .tt-dish__feeds {
  display: inline-block;
  max-width: 100%;
  margin-top: 10px;
  padding: 5px 12px 6px;
  border: 1.5px dashed rgba(184, 54, 10, 0.5);
  border-radius: 10px;
  background: var(--tt-ember-tint);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tt-ink);
}
.lk-toast .tt-dish__feeds b { margin-right: 6px; color: var(--tt-hand-ink); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.lk-toast .tt-dish--pic .tt-dish__text,
.lk-toast .tt-dish--pic .tt-dish__feeds { margin-right: 98px; }
.lk-toast .tt-dish__pic { position: absolute; right: -4px; top: 58px; width: 92px; height: auto; }
/* the two wide scenes (Shmello blowing a dandelion of texts, Shmello diving to save a ringing
   phone) sit on the dotted leader between the name and its number, so the words keep full width */
.lk-toast .tt-dish--wide .tt-dish__pic { top: 48px; right: 54px; translate: 0 -100%; }
.lk-toast .tt-dish__pic--dandelion { width: clamp(118px, 10.4vw, 150px); }
.lk-toast .tt-dish__pic--goalie { width: clamp(128px, 11vw, 160px); }
.lk-toast .tt-menu__smore { position: absolute; z-index: 3; left: -96px; bottom: 90px; width: 150px; height: auto; }
.lk-toast .tt-chain { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.lk-toast .tt-chain__line {
  max-width: 34em;
  margin: 0 auto;
  font-family: var(--tt-display);
  font-size: clamp(1.2rem, 0.9rem + 1vw, 1.7rem);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}
.lk-toast .tt-stamp {
  display: inline-block;
  margin: 6px 0 0 0.3em;
  padding: 0.12em 0.6em 0.14em;
  border: 2.5px solid var(--tt-ink);
  border-radius: 999px;
  background: var(--tt-ember);
  font-weight: 700;
  white-space: nowrap;
  rotate: -3deg;
  box-shadow: 3px 3px 0 var(--tt-ink);
}
@media (max-width: 1379px) {
  .lk-toast .tt-menu__smore { left: -30px; bottom: -64px; width: 124px; }
}
@media (max-width: 1239px) {
  .lk-toast .tt-lantern { display: none; }
}
@media (min-width: 861px) and (max-width: 999px), (max-width: 640px) {
  /* narrow columns (two columns on a small laptop, or a phone): the wide scenes sit above
     their name row instead */
  .lk-toast .tt-dish--wide { display: flex; flex-direction: column; }
  .lk-toast .tt-dish--wide .tt-dish__pic { position: static; order: -1; align-self: flex-end; margin: -4px 50px -10px 0; translate: none; }
  .lk-toast .tt-dish--wide .tt-dish__feeds { align-self: flex-start; }
}
@media (max-width: 860px) {
  .lk-toast .tt-menu__cols { grid-template-columns: minmax(0, 1fr); }
  .lk-toast .tt-menu__col:first-child { padding-right: 0; }
  .lk-toast .tt-menu__col + .tt-menu__col { margin-top: 30px; padding-left: 0; border-left: 0; }
  .lk-toast .tt-menu__smore { display: none; }
}
@media (max-width: 640px) {
  .lk-toast .tt-menu { padding-top: 64px; }
  .lk-toast .tt-menu__rope { height: 50px; }
  .lk-toast .tt-menu__board { border-radius: 22px; box-shadow: 6px 6px 0 var(--tt-ink); }
  .lk-toast .tt-menu__kicker { font-size: 0.78rem; letter-spacing: 0.16em; gap: 10px; }
  .lk-toast .tt-menu__kicker span { width: 22px; }
  .lk-toast .tt-menu__paper { padding: 20px 14px 14px; border-radius: 16px; }
  .lk-toast .tt-course__label { font-size: 0.95rem; padding: 6px 12px 6px 8px; border-radius: 16px; }
  .lk-toast .tt-dish__name { font-size: 1.2rem; }
  .lk-toast .tt-dish__ico { width: 36px; height: 36px; margin: -6px -2px -6px -2px; }
  .lk-toast .tt-dish__no { width: 38px; height: 32px; font-size: 0.78rem; }
  .lk-toast .tt-dish__text { font-size: 0.97rem; }
  /* phones: the upright art sits on the dotted leader too, so every blurb runs full width */
  .lk-toast .tt-dish--pic .tt-dish__text,
  .lk-toast .tt-dish--pic .tt-dish__feeds { margin-right: 0; }
  .lk-toast .tt-dish--pic .tt-dish__pic { width: 50px; top: 46px; right: 46px; translate: 0 -100%; }
  .lk-toast .tt-dish--wide .tt-dish__pic { margin-right: 48px; }
  .lk-toast .tt-dish__pic--dandelion { width: 112px; }
  .lk-toast .tt-dish__pic--goalie { width: 122px; }
  .lk-toast .tt-lantern { display: none; }
}

/* ---------- 5.6 Who it's for: a hometown sign, a tour poster, a big billboard ---------- */
.lk-toast .tt-who {
  padding: clamp(40px, 5vw, 72px) 0 calc(var(--tt-pad-y) + 10px);
  background: linear-gradient(180deg, #FFE1AE 0%, #FFD49A 45%, #FFC484 100%);
}
.lk-toast .tt-who__title { margin-bottom: clamp(40px, 5vw, 64px); text-align: center; }
.lk-toast .tt-road {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.96fr) minmax(0, 1.34fr);
  align-items: end;
  gap: clamp(22px, 3vw, 44px);
}
.lk-toast .tt-road__ground {
  position: relative;
  height: 34px;
  margin: 0 calc(-1 * var(--tt-gutter));
  border-top: 3px solid var(--tt-ink);
  border-bottom: 3px solid var(--tt-ink);
  background:
    linear-gradient(90deg, var(--tt-honey) 0 50%, transparent 50%) 0 50% / 56px 4px repeat-x,
    linear-gradient(180deg, #7A4424, var(--tt-choc));
}
.lk-toast .tt-who__name {
  font-family: var(--tt-display);
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.05rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.012em;
}
/* hometown: the storefront with Your Co. on its sign, the town sign on two posts */
.lk-toast .tt-town { display: flex; flex-direction: column; align-items: center; }
.lk-toast .tt-town__sign { position: relative; width: 100%; order: 1; }
.lk-toast .tt-town__roof {
  display: block;
  width: 64%;
  height: 26px;
  margin: 0 auto -3px;
  border: 3px solid var(--tt-ink);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: repeating-linear-gradient(90deg, var(--tt-ember) 0 18px, var(--tt-mallow) 18px 36px);
}
.lk-toast .tt-town__face {
  position: relative;
  z-index: 1;
  padding: 22px 22px 24px;
  border: 3px solid var(--tt-ink);
  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(122, 69, 34, 0.42) 0 1.8px, transparent 2.4px) 11px 11px / 22px 22px,
    #EFB877;
  box-shadow: 6px 6px 0 var(--tt-ink);
}
.lk-toast .tt-town__face::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 2px solid var(--tt-ink);
  border-radius: 11px;
  background: var(--tt-mallow);
}
.lk-toast .tt-town__face > * { position: relative; }
.lk-toast .tt-town__face .tt-who__name { padding: 4px 6px 0; }
.lk-toast .tt-town__face p { margin-top: 10px; padding: 0 6px 2px; font-size: 1.02rem; line-height: 1.5; color: var(--tt-ink-2); }
.lk-toast .tt-town__posts { display: flex; justify-content: space-between; width: 70%; height: 30px; margin: 0 auto; }
.lk-toast .tt-town__posts i { width: 16px; height: 100%; border: 2.5px solid var(--tt-ink); border-top: 0; background: linear-gradient(90deg, #A0643A, #6E3C21); }
.lk-toast .tt-town__shop { position: relative; order: 2; width: 72%; margin: 0 auto -2px; container-type: inline-size; }
.lk-toast .tt-town__shop img { display: block; width: 100%; height: auto; }
.lk-toast .tt-town__shopname {
  position: absolute;
  top: 10.6%;
  left: 50%;
  translate: -50% -50%;
  font-family: var(--tt-display);
  font-size: 8.4cqi;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--tt-choc);
}
/* tour poster */
.lk-toast .tt-tour {
  position: relative;
  margin-bottom: 64px;
  padding: 22px clamp(18px, 2.2vw, 26px) 26px;
  border: 3px solid var(--tt-ink);
  border-radius: 10px;
  background:
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 184, 51, 0.28) 0 7deg, transparent 7deg 14deg),
    linear-gradient(180deg, #FFF3DC 0%, var(--tt-mallow) 60%);
  box-shadow: var(--tt-pop-lg);
  rotate: 0.8deg;
}
.lk-toast .tt-tour::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 16px;
  height: 64px;
  margin: 3px 0 0 -8px;
  border: 2.5px solid var(--tt-ink);
  border-top: 0;
  background: linear-gradient(90deg, #A0643A, #6E3C21);
}
.lk-toast .tt-tour__sample { position: absolute; z-index: 2; top: -15px; right: 14px; }
.lk-toast .tt-bill__sample { position: absolute; z-index: 2; top: 14px; left: 16px; rotate: -4deg; }
.lk-toast .tt-bill__map { position: relative; }
.lk-toast .tt-tour__tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 28px;
  margin-left: -48px;
  background: rgba(255, 224, 194, 0.85);
  box-shadow: inset 0 0 0 1px rgba(59, 31, 20, 0.08);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 60%, 100% 100%, 2% 96%, 0 60%, 4% 30%);
  rotate: -3deg;
}
.lk-toast .tt-tour__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--tt-display);
  font-size: clamp(2.3rem, 1.4rem + 2.2vw, 3.3rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--tt-ember);
  -webkit-text-stroke: 1.5px var(--tt-ink);
  text-shadow: 3px 3px 0 var(--tt-ink);
}
.lk-toast .tt-tour__band span { margin-top: 4px; font-family: var(--tt-hand); font-size: 1.45rem; font-weight: 400; font-synthesis: none; font-stretch: 100%; color: var(--tt-hand-ink); -webkit-text-stroke: 0; text-shadow: none; }
.lk-toast .tt-tour__map { position: relative; margin: 12px 0 16px; padding: 8px; border: 2px dashed rgba(59, 31, 20, 0.35); border-radius: 12px; background: rgba(255, 224, 194, 0.55); }
.lk-toast .tt-tour__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.lk-toast .tt-tour__road { fill: none; stroke: var(--tt-choc); stroke-width: 14; stroke-linecap: round; }
.lk-toast .tt-tour__lane { fill: none; stroke: var(--tt-honey); stroke-width: 2.5; stroke-dasharray: 8 8; stroke-linecap: round; }
.lk-toast .tt-tour__stop text { font-family: var(--tt-body); font-size: 11px; font-weight: 800; fill: var(--tt-ink); paint-order: stroke; stroke: var(--tt-mallow); stroke-width: 4px; stroke-linejoin: round; }
.lk-toast .tt-tour__smore { position: absolute; left: 10%; top: 2%; width: 27%; height: auto; }
.lk-toast .tt-tour .tt-who__name { text-align: center; }
.lk-toast .tt-tour__text { margin-top: 10px; font-size: 1.02rem; line-height: 1.5; text-align: center; color: var(--tt-ink-2); }
/* the big billboard */
.lk-toast .tt-bill { position: relative; padding-top: 12px; margin-top: 80px; }
.lk-toast .tt-bill__face {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 3px solid var(--tt-ink);
  border-radius: 12px;
  background: var(--tt-mallow);
  box-shadow: inset 0 0 0 7px #EFB877, inset 0 0 0 9.5px var(--tt-ink), var(--tt-pop-lg);
  overflow: hidden;
}
.lk-toast .tt-bill__map {
  padding: 22px 26px 8px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 184, 51, 0.35), transparent 70%),
    linear-gradient(180deg, #FFE9C4, #FFF6E6);
}
.lk-toast .tt-bill__map svg { display: block; width: 100%; max-height: 190px; height: auto; overflow: visible; }
.lk-toast .tt-bill__land { fill: #FFD9A6; stroke: var(--tt-ink); stroke-width: 2.5; stroke-dasharray: 1 0; }
.lk-toast .tt-bill__copy { padding: 14px 28px 28px; }
.lk-toast .tt-bill__copy p { margin-top: 10px; max-width: 30em; font-size: 1.04rem; font-weight: 500; line-height: 1.5; color: var(--tt-ink-2); }
.lk-toast .tt-bill__lamps { position: absolute; top: 8px; left: 12%; right: 12%; display: flex; justify-content: space-between; }
.lk-toast .tt-bill__lamps i { width: 30px; height: 12px; border: 2px solid var(--tt-ink); border-radius: 0 0 8px 8px; background: var(--tt-choc); box-shadow: 0 10px 26px 6px rgba(255, 236, 170, 0.8); }
.lk-toast .tt-bill__smore { position: absolute; z-index: 2; right: 18px; top: -82px; width: 132px; height: auto; }
.lk-toast .tt-bill__legs { display: flex; justify-content: space-between; width: 62%; height: 60px; margin: 0 auto; }
.lk-toast .tt-bill__legs i { width: 20px; height: 100%; border: 2.5px solid var(--tt-ink); border-top: 0; background: linear-gradient(90deg, #A0643A, #6E3C21); }
/* the tilted ribbon of trades */
.lk-toast .tt-ribbon { position: relative; margin: clamp(56px, 7vw, 92px) calc(-1 * var(--tt-gutter)) 0; }
.lk-toast .tt-ribbon__band {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -3%;
  padding: 0 calc(3% + 8px) 0 0;
  border-top: 3px solid var(--tt-ink);
  border-bottom: 3px solid var(--tt-ink);
  background: var(--tt-ink);
  color: var(--tt-cream);
  rotate: -2deg;
  box-shadow: 0 8px 0 rgba(59, 31, 20, 0.2);
}
.lk-toast .tt-ribbon__view { flex: 1; min-width: 0; overflow: hidden; }
.lk-toast .tt-ribbon__track { display: flex; width: max-content; animation: tt-ribbon 70s linear infinite; }
.lk-toast .tt-ribbon.is-paused .tt-ribbon__track { animation-play-state: paused; }
.lk-toast .tt-ribbon__list {
  flex: none;
  padding: 16px 0 17px;
  font-family: var(--tt-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.lk-toast .tt-ribbon__list::after { content: "\00B7"; padding: 0 0.7em; color: var(--tt-honey); }
.lk-toast .tt-ribbon__list i { padding: 0 0.4em; font-style: normal; color: var(--tt-honey); }
.lk-toast .tt-ribbon__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--tt-honey);
  border-radius: 50%;
  background: transparent;
  color: var(--tt-honey);
  cursor: pointer;
}
.lk-toast .tt-ribbon__btn:focus-visible { outline-color: var(--tt-honey); outline-offset: 2px; }
.lk-toast .tt-ribbon__btn svg { width: 14px; height: 14px; fill: currentColor; }
.lk-toast .tt-ribbon__play { display: none; }
.lk-toast .tt-ribbon.is-paused .tt-ribbon__pause { display: none; }
.lk-toast .tt-ribbon.is-paused .tt-ribbon__play { display: block; }
/* the rules plank hangs under the ribbon */
.lk-toast .tt-rules { position: relative; max-width: 640px; margin: 0 auto; padding-top: 58px; }
.lk-toast .tt-rules__ropes { position: absolute; top: 0; left: 22%; right: 22%; height: 62px; display: flex; justify-content: space-between; }
.lk-toast .tt-rules__ropes i { width: 6px; height: 100%; border: 2px solid var(--tt-ink); border-radius: 4px; background: repeating-linear-gradient(160deg, #E7C08A 0 4px, #C99A5E 4px 7px); }
.lk-toast .tt-rules__plank {
  position: relative;
  padding: 24px clamp(20px, 3vw, 36px) 24px;
  border: 3px solid var(--tt-ink);
  border-radius: 16px;
  background:
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(0, 0, 0, 0.22) 38px 40px),
    linear-gradient(180deg, #7C4526 0%, var(--tt-choc) 50%, #5A2F17 100%);
  box-shadow: 6px 8px 0 var(--tt-ink);
  color: var(--tt-cream);
  text-align: center;
}
.lk-toast .tt-rules__plank p { font-size: 1.08rem; line-height: 1.55; }
.lk-toast .tt-rules__plank strong { display: block; margin-top: 8px; font-family: var(--tt-display); font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: var(--tt-honey); }
.lk-toast .tt-who__go { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: clamp(40px, 5vw, 56px); text-align: center; }
.lk-toast .tt-who__route { max-width: 30em; font-size: 1.12rem; font-weight: 600; }
@media (max-width: 1099px) and (min-width: 700px) {
  .lk-toast .tt-road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-toast .tt-bill { grid-column: 1 / -1; max-width: 680px; width: 100%; margin: 24px auto 0; }
}
@media (max-width: 699px) {
  .lk-toast .tt-road { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lk-toast .tt-road > article { padding-bottom: 0; border-bottom: 0; }
  .lk-toast .tt-town { padding-bottom: 0; }
  .lk-toast .tt-town__shop { width: 62%; }
  .lk-toast .tt-tour { margin-bottom: 20px; rotate: 0.6deg; }
  .lk-toast .tt-tour::after { display: none; }
  .lk-toast .tt-bill__smore { width: 100px; right: 10px; top: -62px; }
  .lk-toast .tt-bill__legs { height: 34px; }
  .lk-toast .tt-bill__copy { padding: 12px 22px 24px; }
  .lk-toast .tt-bill__map { padding: 18px 18px 6px; }
  .lk-toast .tt-ribbon__list { font-size: 0.96rem; padding: 13px 0 14px; }
  .lk-toast .tt-rules__plank { padding: 20px 18px; }
  .lk-toast .tt-rules__plank p { font-size: 0.99rem; }
  .lk-toast .tt-rules__plank strong { font-size: 1.2rem; }
}

/* ---------- 5.7 Proof: receipts glowing by the fire, real posts on string lights ---------- */
.lk-toast .tt-proof {
  padding: calc(var(--tt-pad-y) + 30px) 0 clamp(56px, 6vw, 96px);
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(255, 120, 60, 0.14), transparent 70%),
    linear-gradient(180deg, var(--tt-plum) 0%, #2A1A3A 45%, var(--tt-dusk) 100%);
  color: var(--tt-night-ink);
}
.lk-toast .tt-proof::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 0;
  right: 0;
  height: clamp(36px, 5vw, 70px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V34C1290 64 1110 18 930 42S560 78 380 46 120 26 0 50Z' fill='%23FFC484'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
  pointer-events: none;
}
.lk-toast .tt-proof :focus-visible,
.lk-toast .tt-team :focus-visible,
.lk-toast .tt-check :focus-visible { outline-color: var(--tt-honey); }
.lk-toast .tt-night { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lk-toast .tt-night__stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 246, 220, 0.9) 0 1px, transparent 1.6px) 0 0 / 190px 170px,
    radial-gradient(circle, rgba(255, 246, 220, 0.6) 0 1px, transparent 1.6px) 60px 90px / 260px 230px,
    radial-gradient(circle, rgba(255, 220, 160, 0.7) 0 1.4px, transparent 2px) 120px 30px / 330px 290px;
  animation: tt-stars 5s ease-in-out infinite alternate;
}
.lk-toast .tt-proof .tt-wrap { position: relative; z-index: 2; }
.lk-toast .tt-proof__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.lk-toast .tt-proof__words .tt-eyebrow { margin-bottom: 16px; }
.lk-toast .tt-proof .tt-h2 { color: #FFF8EA; max-width: 12em; }
.lk-toast .tt-proof__art { display: block; width: 100%; max-width: 470px; height: auto; margin-left: auto; filter: drop-shadow(0 0 40px rgba(255, 150, 50, 0.35)); }
.lk-toast .tt-receipts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(18px, 2.2vw, 30px);
}
.lk-toast .tt-receipt { filter: drop-shadow(0 0 26px rgba(255, 150, 50, 0.4)) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35)); }
.lk-toast .tt-receipt:nth-child(2) { margin-top: 34px; rotate: 0.8deg; }
.lk-toast .tt-receipt:nth-child(1) { rotate: -0.8deg; }
.lk-toast .tt-receipt:nth-child(3) { margin-top: 12px; rotate: -0.6deg; }
.lk-toast .tt-receipt:nth-child(4) { margin-top: 46px; rotate: 0.9deg; }
.lk-toast .tt-receipt__paper {
  --zz: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 22px 30px;
  background:
    linear-gradient(180deg, rgba(255, 214, 150, 0.35), rgba(255, 214, 150, 0) 30%),
    #FFF7E6;
  color: var(--tt-ink);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x;
}
.lk-toast .tt-receipt__top {
  display: flex;
  justify-content: space-between;
  align-self: stretch;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(59, 31, 20, 0.35);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tt-ink-2);
}
.lk-toast .tt-receipt__num {
  margin-top: 14px;
  font-family: var(--tt-display);
  font-size: clamp(2.8rem, 2rem + 1.8vw, 3.7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--tt-ink);
}
.lk-toast .tt-receipt__num--sm { font-size: clamp(2.2rem, 1.7rem + 1.2vw, 2.8rem); }
.lk-toast .tt-receipt__num small { display: block; margin-bottom: 4px; font-family: var(--tt-body); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-ink-2); }
.lk-toast .tt-receipt__label {
  align-self: stretch;
  margin-top: 8px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(59, 31, 20, 0.35);
  font-family: var(--tt-display);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.15;
}
.lk-toast .tt-receipt__text { margin-top: 12px; font-size: 0.98rem; line-height: 1.5; color: var(--tt-ink-2); }
.lk-toast .tt-receipt__fine { margin-top: 10px; padding-left: 10px; border-left: 3px solid var(--tt-ember); font-size: 0.92rem; line-height: 1.45; color: var(--tt-ink-2); }
.lk-toast .tt-receipt__code {
  align-self: stretch;
  height: 30px;
  margin-top: 18px;
  background: repeating-linear-gradient(90deg, var(--tt-ink) 0 2px, transparent 2px 4px, var(--tt-ink) 4px 5px, transparent 5px 8px, var(--tt-ink) 8px 11px, transparent 11px 13px);
  opacity: 0.82;
}
/* string lights with the real posts pegged on */
.lk-toast .tt-lights { position: relative; margin-top: clamp(64px, 8vw, 110px); }
.lk-toast .tt-lights__wire { position: absolute; top: 0; left: -2%; width: 104%; height: 120px; overflow: visible; }
.lk-toast .tt-lights__wire path { fill: none; stroke: #1B1020; stroke-width: 3; vector-effect: non-scaling-stroke; }
.lk-toast .tt-lights__bulbs { position: absolute; top: 0; left: -2%; width: 104%; height: 120px; }
.lk-toast .tt-lights__bulbs i {
  position: absolute;
  width: 11px;
  height: 15px;
  margin: -2px 0 0 -5.5px;
  border-radius: 50% 50% 45% 45%;
  background: #FFD27A;
  box-shadow: 0 0 10px 3px rgba(255, 190, 90, 0.8), 0 0 26px 8px rgba(255, 140, 40, 0.3);
  animation: tt-bulb 2.6s ease-in-out infinite;
}
.lk-toast .tt-lights__bulbs i:nth-child(1) { left: 5%; top: 40.6px; }
.lk-toast .tt-lights__bulbs i:nth-child(2) { left: 11.67%; top: 64.6px; animation-delay: -0.4s; }
.lk-toast .tt-lights__bulbs i:nth-child(3) { left: 21.67%; top: 64.6px; animation-delay: -1.2s; }
.lk-toast .tt-lights__bulbs i:nth-child(4) { left: 28.33%; top: 40.6px; animation-delay: -0.8s; }
.lk-toast .tt-lights__bulbs i:nth-child(5) { left: 38.33%; top: 40.6px; animation-delay: -1.8s; }
.lk-toast .tt-lights__bulbs i:nth-child(6) { left: 45%; top: 64.6px; animation-delay: -0.2s; }
.lk-toast .tt-lights__bulbs i:nth-child(7) { left: 55%; top: 64.6px; animation-delay: -1.5s; }
.lk-toast .tt-lights__bulbs i:nth-child(8) { left: 61.67%; top: 40.6px; animation-delay: -2.1s; }
.lk-toast .tt-lights__bulbs i:nth-child(9) { left: 71.67%; top: 40.6px; animation-delay: -0.6s; }
.lk-toast .tt-lights__bulbs i:nth-child(10) { left: 78.33%; top: 64.6px; animation-delay: -1.1s; }
.lk-toast .tt-lights__bulbs i:nth-child(11) { left: 88.33%; top: 64.6px; animation-delay: -1.9s; }
.lk-toast .tt-lights__bulbs i:nth-child(12) { left: 95%; top: 40.6px; animation-delay: -0.3s; }
.lk-toast .tt-lights__note { position: absolute; top: -40px; left: 50%; translate: -50% 0; font-size: 1.45rem; color: #FFD27A; white-space: nowrap; rotate: -3deg; }
.lk-toast .tt-lights__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  padding: 62px clamp(8px, 2vw, 28px) 0;
}
.lk-toast .tt-snap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: zoom-in;
  outline-offset: 8px;
  border-radius: 12px;
  transform-origin: 50% 0;
}
.lk-toast .tt-snap--a { rotate: -2deg; }
.lk-toast .tt-snap--b { rotate: 1.6deg; }
.lk-toast .tt-snap--c { rotate: -1.2deg; }
.lk-toast .tt-snap__peg {
  position: absolute;
  z-index: 2;
  top: -16px;
  left: 50%;
  width: 16px;
  height: 36px;
  margin-left: -8px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 5px;
  background: linear-gradient(90deg, #E7C08A, #C99A5E);
}
.lk-toast .tt-snap__photo {
  display: block;
  width: 100%;
  padding: 10px 10px 12px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 0 40px rgba(255, 170, 70, 0.35), 5px 6px 0 rgba(0, 0, 0, 0.4);
  transition: translate 0.3s var(--tt-spring);
}
.lk-toast .tt-snap:hover .tt-snap__photo,
.lk-toast .tt-snap:focus-visible .tt-snap__photo { translate: 0 -5px; }
.lk-toast .tt-snap__photo img { display: block; width: 100%; height: auto; border-radius: 3px; }
.lk-toast .tt-snap__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 14px 6px 11px;
  border: 2px solid var(--tt-ink);
  border-radius: 999px;
  background: var(--tt-honey);
  color: var(--tt-ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  box-shadow: 3px 3px 0 var(--tt-ink);
}
.lk-toast .tt-proof__caption { max-width: 38em; margin: clamp(40px, 5vw, 60px) auto 0; font-size: 1.08rem; text-align: center; color: var(--tt-night-ink-2); }
@media (max-width: 1099px) {
  .lk-toast .tt-receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; }
  .lk-toast .tt-receipt:nth-child(n) { margin-top: 0; }
  .lk-toast .tt-receipt:nth-child(even) { margin-top: 30px; }
}
@media (max-width: 860px) {
  .lk-toast .tt-proof__head { grid-template-columns: minmax(0, 1fr); }
  .lk-toast .tt-proof__art { max-width: 380px; margin: 0 auto; }
}
@media (max-width: 699px) {
  .lk-toast .tt-receipts { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 420px; }
  .lk-toast .tt-receipt:nth-child(even) { margin-top: 0; }
  .lk-toast .tt-lights { margin-top: 72px; }
  .lk-toast .tt-lights__wire, .lk-toast .tt-lights__bulbs { display: none; }
  .lk-toast .tt-lights__note { top: -44px; }
  .lk-toast .tt-lights__row { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 18px 16px 0; }
  .lk-toast .tt-snap { rotate: 0deg; }
  .lk-toast .tt-snap--a .tt-snap__photo { rotate: -1.4deg; }
  .lk-toast .tt-snap--b .tt-snap__photo { rotate: 1.2deg; }
  .lk-toast .tt-snap--c .tt-snap__photo { rotate: -0.8deg; }
}

/* ---------- 5.7b The family: one family portrait, framed and hung by the fire ----------
   Laptops: a golden-hour group photo, the five in a row on one hill under a string of flags, each
   name written on the mat under its owner. Up to 999px: the same frame holds a photo booth strip
   down the left, each name beside its owner. */
.lk-toast .tt-family {
  --fam-ph: clamp(200px, 16.4vw, 236px);
  --fam-pad: 16px;
  padding: clamp(36px, 4vw, 64px) 0 clamp(72px, 8vw, 120px);
  background:
    radial-gradient(1000px 460px at 50% 66%, rgba(255, 130, 50, 0.22), transparent 70%),
    var(--tt-dusk);
  color: var(--tt-night-ink);
}
.lk-toast .tt-family .tt-wrap { position: relative; z-index: 2; }
.lk-toast .tt-family__head { max-width: 46rem; margin: 0 auto; text-align: center; }
.lk-toast .tt-family .tt-h2 { color: #FFF8EA; }
.lk-toast .tt-family__sub { margin-top: 16px; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem); color: var(--tt-night-ink-2); }

/* the frame: a wood band with a cocoa line either side, lit by the fire */
.lk-toast .tt-portrait {
  position: relative;
  max-width: 1180px;
  margin: clamp(64px, 6vw, 84px) auto 0;
  padding: 15px;
  border: 3px solid var(--tt-ink);
  border-radius: 20px;
  background:
    repeating-linear-gradient(90deg, rgba(59, 31, 20, 0.08) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #B87A45 0%, var(--tt-wood) 38%, #74401F 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 226, 180, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    var(--tt-pop-lg),
    0 0 0 1px rgba(255, 184, 51, 0.2),
    0 30px 90px -10px rgba(255, 128, 40, 0.5);
  rotate: -0.4deg;
}
.lk-toast .tt-portrait :focus-visible { outline-color: var(--tt-ink); }
.lk-toast .tt-portrait__in {
  position: relative;
  padding: var(--fam-pad) var(--fam-pad) 22px;
  border: 2.5px solid var(--tt-ink);
  border-radius: 9px;
  background:
    radial-gradient(circle, rgba(184, 99, 42, 0.07) 0 1px, transparent 1.4px) 0 0 / 9px 9px,
    var(--tt-cream);
}
/* the photo */
.lk-toast .tt-portrait__photo {
  position: absolute;
  top: var(--fam-pad);
  left: var(--fam-pad);
  right: var(--fam-pad);
  height: var(--fam-ph);
  overflow: hidden;
  border: 2.5px solid var(--tt-ink);
  border-radius: 6px;
  background:
    radial-gradient(34% 58% at 50% 100%, #FFFBE8 0 34%, rgba(255, 237, 184, 0.9) 58%, rgba(255, 217, 138, 0) 100%),
    linear-gradient(180deg, #FFE7A8 0%, #FFC65E 46%, #FF9A52 100%);
}
.lk-toast .tt-portrait__rays {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from -90deg at 50% 112%, rgba(255, 255, 255, 0.22) 0 5deg, rgba(255, 255, 255, 0) 5deg 14deg);
  -webkit-mask: linear-gradient(180deg, transparent 4%, #000 70%);
  mask: linear-gradient(180deg, transparent 4%, #000 70%);
}
.lk-toast .tt-portrait__bunting { position: absolute; top: 0; left: 0; width: 100%; height: 44px; overflow: visible; }
.lk-toast .tt-portrait__cord { fill: none; stroke: var(--tt-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lk-toast .tt-portrait__flags path { stroke: var(--tt-ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lk-toast .tt-portrait__flags path:nth-child(3n + 1) { fill: var(--tt-ember); }
.lk-toast .tt-portrait__flags path:nth-child(3n + 2) { fill: var(--tt-honey); }
.lk-toast .tt-portrait__flags path:nth-child(3n) { fill: var(--tt-mallow); }
.lk-toast .tt-portrait__glints svg { position: absolute; width: 24px; height: 24px; fill: #FFFBE8; animation: tt-twinkle 3s ease-in-out infinite; }
.lk-toast .tt-portrait__glints svg:nth-child(1) { left: 5%; top: 44%; }
.lk-toast .tt-portrait__glints svg:nth-child(2) { left: 29%; top: 30%; width: 13px; height: 13px; animation-delay: -1.1s; }
.lk-toast .tt-portrait__glints svg:nth-child(3) { left: 69%; top: 34%; width: 15px; height: 15px; animation-delay: -2.2s; }
.lk-toast .tt-portrait__glints svg:nth-child(4) { left: 94%; top: 46%; animation-delay: -0.6s; }
.lk-toast .tt-portrait__hill { position: absolute; left: 0; bottom: 0; width: 100%; height: 50px; }
.lk-toast .tt-portrait__hill path { fill: #5B2E4F; }
.lk-toast .tt-portrait__hill .tt-portrait__rim { fill: none; stroke: #FFB37A; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* the family, left to right, each standing over its own name */
.lk-toast .tt-portrait__list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 12px;
}
.lk-toast .tt-kin { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lk-toast .tt-kin__pic {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--fam-ph);
  padding-bottom: 16px;
}
.lk-toast .tt-kin__pic::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 12px;
  width: 64%;
  height: 12px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 12, 30, 0.5), rgba(26, 12, 30, 0));
}
.lk-toast .tt-kin__pic img {
  display: block;
  flex: none;
  width: var(--w);
  max-width: none;
  height: auto;
  transition: translate 0.35s var(--tt-spring);
}
.lk-toast .tt-kin:hover .tt-kin__pic img,
.lk-toast .tt-kin:focus-within .tt-kin__pic img { translate: 0 -6px; }
.lk-toast .tt-kin--pawn { --w: clamp(150px, 14.2vw, 196px); }
.lk-toast .tt-kin--lawn { --w: clamp(128px, 12.2vw, 172px); }
.lk-toast .tt-kin--coffee { --w: clamp(128px, 12.2vw, 172px); }
.lk-toast .tt-kin--shmello { --w: clamp(170px, 16.4vw, 236px); }
.lk-toast .tt-kin--card { --w: clamp(124px, 11.8vw, 164px); }
/* the loupe comes with its own counter: it sits a little lower, with a wider shadow under it */
.lk-toast .tt-kin--pawn .tt-kin__pic { padding-bottom: 10px; }
.lk-toast .tt-kin--pawn .tt-kin__pic::after { bottom: 6px; width: 84%; }
.lk-toast .tt-kin__cap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 4px 0; }
.lk-toast .tt-kin__name { font-family: var(--tt-display); font-size: clamp(1.2rem, 1rem + 0.5vw, 1.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--tt-ink); }
.lk-toast .tt-kin__line { max-width: 14em; font-size: 0.97rem; line-height: 1.4; color: var(--tt-ink-2); text-wrap: balance; }
.lk-toast .tt-kin__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tt-ink);
  text-decoration: underline;
  text-decoration-color: var(--tt-ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.lk-toast .tt-kin__link svg { flex: none; width: 13px; height: 13px; color: var(--tt-cherry); transition: translate 0.2s var(--tt-spring); }
.lk-toast .tt-kin__link:hover { color: var(--tt-hand-ink); text-decoration-thickness: 3px; }
.lk-toast .tt-kin__link:hover svg { translate: 2px -2px; }
/* hand note: the photographer's line, over the top right corner */
.lk-toast .tt-portrait__note {
  position: absolute;
  z-index: 3;
  right: 3%;
  bottom: calc(100% + 4px);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-size: 1.55rem;
  color: #FFD27A;
  white-space: nowrap;
  rotate: -3deg;
}
.lk-toast .tt-portrait__note svg { width: 58px; height: 31px; margin-bottom: -18px; color: #FFD27A; rotate: -8deg; }

@media (max-width: 999px) {
  .lk-toast .tt-family { --fam-pw: 176px; --fam-pad: 14px; }
  .lk-toast .tt-portrait { max-width: 640px; padding: 12px; rotate: 0deg; }
  .lk-toast .tt-portrait__in { padding: var(--fam-pad); }
  /* the photo becomes the booth strip's paper down the left */
  .lk-toast .tt-portrait__photo { right: auto; bottom: var(--fam-pad); width: var(--fam-pw); height: auto; background: #FFFFFF; }
  .lk-toast .tt-portrait__rays, .lk-toast .tt-portrait__bunting, .lk-toast .tt-portrait__glints, .lk-toast .tt-portrait__hill { display: none; }
  /* every row as tall as the tallest, so the strip's frames sit evenly spaced */
  .lk-toast .tt-portrait__list { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
  .lk-toast .tt-kin { display: grid; grid-template-columns: var(--fam-pw) minmax(0, 1fr); align-items: stretch; column-gap: 18px; text-align: left; }
  .lk-toast .tt-kin__pic {
    z-index: 0;
    align-self: stretch;
    width: auto;
    height: auto;
    min-height: 96px;
    margin: 6px 9px;
    padding-bottom: 12%;
    overflow: hidden;
    border: 2px solid var(--tt-ink);
    border-radius: 4px;
    background:
      radial-gradient(150% 34% at 50% 100%, #5B2E4F 0 62%, rgba(91, 46, 79, 0) 64%),
      radial-gradient(56% 70% at 50% 100%, #FFFBE8 0 30%, rgba(255, 237, 184, 0) 100%),
      linear-gradient(180deg, #FFE7A8 0%, #FFC65E 50%, #FF9A52 100%);
  }
  .lk-toast .tt-kin:first-child .tt-kin__pic { margin-top: 10px; }
  .lk-toast .tt-kin:last-child .tt-kin__pic { margin-bottom: 10px; }
  .lk-toast .tt-kin__pic img { max-height: 100%; }
  .lk-toast .tt-kin__pic::after { bottom: 8%; }
  .lk-toast .tt-kin--pawn .tt-kin__pic { padding-bottom: 8%; }
  .lk-toast .tt-kin--pawn .tt-kin__pic::after { bottom: 5%; }
  .lk-toast .tt-kin--pawn { --w: 94%; }
  .lk-toast .tt-kin--lawn { --w: 80%; }
  .lk-toast .tt-kin--coffee { --w: 80%; }
  .lk-toast .tt-kin--shmello { --w: 100%; }
  .lk-toast .tt-kin--card { --w: 76%; }
  .lk-toast .tt-kin__cap { align-items: flex-start; justify-content: center; gap: 4px; padding: 12px 0; }
  .lk-toast .tt-kin + .tt-kin .tt-kin__cap { border-top: 2px dashed rgba(59, 31, 20, 0.25); }
  .lk-toast .tt-kin__line { max-width: none; text-wrap: pretty; }
  .lk-toast .tt-kin__link { margin: -2px 0 -8px; }
  .lk-toast .tt-portrait__note { right: 6px; font-size: 1.4rem; }
}
@media (max-width: 640px) {
  .lk-toast .tt-family { --fam-pw: 128px; --fam-pad: 10px; }
  .lk-toast .tt-portrait { margin-top: 62px; padding: 10px; border-radius: 16px; box-shadow: inset 0 2px 0 rgba(255, 226, 180, 0.35), 6px 6px 0 var(--tt-ink), 0 24px 70px -10px rgba(255, 128, 40, 0.5); }
  .lk-toast .tt-kin { column-gap: 14px; }
  .lk-toast .tt-kin__pic { margin: 5px 7px; }
  .lk-toast .tt-kin__name { font-size: 1.16rem; }
  .lk-toast .tt-kin__line { font-size: 0.92rem; line-height: 1.35; }
  .lk-toast .tt-kin__link { font-size: 0.92rem; }
  .lk-toast .tt-portrait__note { font-size: 1.28rem; }
  .lk-toast .tt-portrait__note svg { width: 48px; height: 26px; }
}

/* ---------- 5.8 Team: the campfire circle ---------- */
.lk-toast .tt-team {
  padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 6vw, 88px);
  background:
    radial-gradient(640px 300px at 50% 64%, rgba(255, 120, 40, 0.26), transparent 70%),
    var(--tt-dusk);
  color: var(--tt-night-ink);
}
.lk-toast .tt-team__title { text-align: center; color: #FFF8EA; }
.lk-toast .tt-circle { position: relative; margin-top: clamp(44px, 5vw, 64px); padding-bottom: clamp(90px, 9vw, 130px); }
.lk-toast .tt-circle__list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.lk-toast .tt-mate {
  width: 15%;
  margin-top: calc((2 - var(--lift, 0)) * clamp(40px, 5vw, 76px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lk-toast .tt-mate__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 156px;
  aspect-ratio: 1;
  padding: 7px;
  border: 2.5px solid #140C18;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tt-toast-2), var(--tt-mallow) 36%);
  box-shadow: 0 0 0 2.5px rgba(255, 184, 51, 0.35), 0 16px 50px -6px rgba(255, 130, 40, 0.55);
}
.lk-toast .tt-mate__photo { display: block; width: 100%; height: 100%; object-fit: cover; border: 2.5px solid var(--tt-ink); border-radius: 50%; background: #3A2342; }
.lk-toast .tt-mate__big {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2.5px solid var(--tt-ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE6A8 0 18%, var(--tt-honey) 70%);
  font-family: var(--tt-display);
  font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--tt-ink);
}
.lk-toast .tt-mate__name { margin-top: 14px; font-family: var(--tt-display); font-size: 1.14rem; font-weight: 600; line-height: 1.15; color: #FFF8EA; }
.lk-toast .tt-mate__role { margin-top: 4px; font-size: 0.9rem; font-weight: 500; line-height: 1.3; color: var(--tt-night-ink-2); }
.lk-toast .tt-camp__fire svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the crew circles a camp lantern on a stump (the campfire is saved for the bottom CTA) */
.lk-toast .tt-circle__lamp { position: absolute; z-index: 1; left: 50%; bottom: 0; width: clamp(112px, 9.6vw, 138px); translate: -50% 0; }
.lk-toast .tt-circle__lamp svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 22px rgba(255, 200, 90, 0.55)); }
.lk-toast .tt-circle__lamp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 360%;
  aspect-ratio: 1.5;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, 0.42), rgba(255, 184, 51, 0.14) 45%, transparent 75%);
  animation: tt-glow 3.2s ease-in-out infinite;
  pointer-events: none;
}
.lk-toast .tt-lamp__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: tt-flick-c 1.3s ease-in-out infinite; }
/* fireflies drifting around the lantern */
.lk-toast .tt-flies { position: absolute; left: 50%; top: 44%; width: 0; height: 0; }
.lk-toast .tt-flies i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFF3B0;
  box-shadow: 0 0 8px 3px rgba(255, 220, 110, 0.75);
  opacity: 0;
  animation: tt-fly 6s ease-in-out infinite;
}
.lk-toast .tt-flies i:nth-child(1) { left: -110px; top: -40px; --fx: 26px; --fy: -22px; }
.lk-toast .tt-flies i:nth-child(2) { left: 92px; top: -70px; --fx: -20px; --fy: 18px; animation-delay: -1.4s; animation-duration: 7s; }
.lk-toast .tt-flies i:nth-child(3) { left: -80px; top: 50px; --fx: 18px; --fy: 16px; animation-delay: -2.6s; }
.lk-toast .tt-flies i:nth-child(4) { left: 120px; top: 30px; --fx: -24px; --fy: -20px; animation-delay: -3.8s; animation-duration: 6.6s; }
.lk-toast .tt-flies i:nth-child(5) { left: 10px; top: -120px; --fx: 22px; --fy: 12px; animation-delay: -4.6s; animation-duration: 7.4s; }
@media (max-width: 999px) {
  .lk-toast .tt-circle__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; max-width: 640px; margin: 0 auto; }
  .lk-toast .tt-mate { width: auto; margin-top: 0; }
  .lk-toast .tt-mate:nth-child(2), .lk-toast .tt-mate:nth-child(5) { margin-top: 24px; }
  .lk-toast .tt-circle { padding-bottom: 196px; }
  .lk-toast .tt-circle__lamp { width: 118px; }
}
@media (max-width: 640px) {
  .lk-toast .tt-circle__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 18px; }
  .lk-toast .tt-mate:nth-child(n) { margin-top: 0; }
  .lk-toast .tt-mate:nth-child(even) { margin-top: 22px; }
  .lk-toast .tt-mate__ring { max-width: 132px; }
  .lk-toast .tt-mate__name { font-size: 1.04rem; }
  .lk-toast .tt-mate__role { font-size: 0.84rem; }
  .lk-toast .tt-circle { padding-bottom: 168px; }
  .lk-toast .tt-circle__lamp { width: 102px; }
}

/* ---------- 5.9 Bottom CTA: the campfire where you toast Shmello ---------- */
.lk-toast .tt-check {
  padding: clamp(56px, 6vw, 96px) 0 calc(var(--tt-pad-y) + 20px);
  overflow: clip;
  background:
    radial-gradient(640px 460px at 22% 78%, rgba(255, 120, 40, 0.3), transparent 70%),
    linear-gradient(180deg, var(--tt-dusk) 0%, #20183A 55%, #2B1D3F 100%);
  color: var(--tt-night-ink);
}
.lk-toast .tt-check::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(28px, 4vw, 56px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V26C260 56 520 6 780 24S1220 54 1440 18V60Z' fill='%23FFF8EA'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
/* Shmello peeks over the hill at sunrise, into the footer */
.lk-toast .tt-peek { position: absolute; z-index: 2; right: 9%; bottom: -3px; width: clamp(92px, 9vw, 132px); height: auto; }
.lk-toast .tt-check__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}
.lk-toast .tt-check__title { font-size: clamp(2rem, 1rem + 2.1vw, 2.75rem); line-height: 1.06; color: #FFF8EA; }
.lk-toast .tt-check__turn { display: block; margin-top: 0.12em; }
.lk-toast .tt-check__sub { margin-top: 20px; max-width: 30em; font-size: clamp(1.05rem, 0.96rem + 0.34vw, 1.2rem); line-height: 1.5; color: var(--tt-night-ink-2); }
.lk-toast .tt-camp { position: relative; width: min(560px, 100%); height: 320px; margin-top: 56px; }
.lk-toast .tt-camp__fire { position: absolute; left: 44%; bottom: 6px; width: 210px; translate: -50% 0; }
.lk-toast .tt-camp__fire::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60px;
  width: 440px;
  height: 320px;
  margin-left: -220px;
  background: radial-gradient(closest-side, rgba(255, 130, 50, 0.32), rgba(255, 91, 31, 0.1) 50%, transparent 80%);
  animation: tt-glow 2.6s ease-in-out infinite;
  pointer-events: none;
}
.lk-toast .tt-toy--camp { position: absolute; z-index: 2; left: 44%; bottom: 170px; width: 104px; aspect-ratio: 1; translate: -50% 0; }
/* on the stick the fire poses stay a touch smaller, so his flames never reach the words above */
.lk-toast .tt-toy--camp[data-step="3"] .tt-toy__img { width: 142%; }
.lk-toast .tt-toy--camp[data-step="4"] .tt-toy__img { width: 156%; }
.lk-toast .tt-toy--camp .tt-toy__btn { animation: tt-dangle 3.6s ease-in-out infinite; transform-origin: 90% 60%; }
.lk-toast .tt-toy__stick {
  position: absolute;
  z-index: -1;
  right: 46%;
  top: 56%;
  width: 230px;
  height: 7px;
  border: 1.5px solid #1B1020;
  border-radius: 4px;
  background: linear-gradient(90deg, #5A2F18, #9A6436 60%, #D9A36B);
  transform-origin: 100% 50%;
  rotate: -32deg;
}
.lk-toast .tt-toy--camp .tt-toy__img { filter: drop-shadow(0 0 16px rgba(255, 138, 61, 0.55)); }
.lk-toast .tt-toy__line {
  position: absolute;
  top: 8px;
  left: calc(100% + 26px);
  display: grid;
  place-items: center start;
  width: 196px;
  min-height: 2.9em;
  padding: 7px 14px;
  border: 1.5px solid rgba(255, 184, 51, 0.4);
  border-radius: 16px;
  background: rgba(255, 184, 51, 0.12);
  font-family: var(--tt-hand);
  font-size: 1.28rem;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.15;
  color: #FFE2A3;
}
.lk-toast .tt-toy__line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  margin-top: -9px;
  border: 9px solid transparent;
  border-left: 0;
  border-right-color: rgba(255, 184, 51, 0.4);
}
.lk-toast .tt-toy--camp[data-step="4"] .tt-toy__img { animation: tt-sag 1.4s var(--tt-ease) 0.15s both; }
.lk-toast .tt-check__side { min-width: 0; }
.lk-toast .tt-card {
  position: relative;
  padding: 20px;
  border: 3px solid var(--tt-ink);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--tt-toast-2) 0, var(--tt-toast-1) 14px, #FFF4E2 34px, var(--tt-mallow) 70px);
  box-shadow: 10px 10px 0 #0B0712, var(--tt-firelight);
  color: var(--tt-ink);
}
.lk-toast .tt-mform--card { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); padding: 6px 4px 4px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.lk-toast .tt-mform--card .btn { grid-column: 1 / -1; min-height: 56px; font-size: 1.1rem; }
.lk-toast .tt-check__after { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin-top: 30px; }
.lk-toast .tt-free--night { color: var(--tt-night-ink-2); }
.lk-toast .tt-free--night strong { color: #FFF8EA; }
.lk-toast .tt-check .btn-ghost { border-color: rgba(255, 248, 234, 0.55); color: #FFF8EA; }
.lk-toast .tt-check .btn-ghost:hover { border-color: #FFF8EA; background: rgba(255, 248, 234, 0.08); }
@media (max-width: 999px) {
  .lk-toast .tt-check__grid { grid-template-columns: minmax(0, 1fr); }
  .lk-toast .tt-check__side { max-width: 600px; width: 100%; }
  .lk-toast .tt-camp { margin: 64px auto 0; height: 340px; }
  .lk-toast .tt-camp__fire { left: 50%; bottom: 60px; }
  .lk-toast .tt-toy--camp { left: 50%; bottom: 246px; }
  .lk-toast .tt-toy__line { top: auto; bottom: -246px; left: 50%; translate: -50% 0; width: 260px; place-items: center; text-align: center; }
  .lk-toast .tt-toy__line::before { display: none; }
}
@media (max-width: 640px) {
  .lk-toast .tt-card { padding: 14px 12px 12px; border-radius: 22px; box-shadow: 6px 6px 0 #0B0712, var(--tt-firelight); }
  .lk-toast .tt-mform--card { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lk-toast .tt-camp { height: 320px; }
  .lk-toast .tt-camp__fire { width: 180px; bottom: 58px; }
  .lk-toast .tt-toy--camp { width: 92px; bottom: 214px; }
  .lk-toast .tt-toy__stick { width: 170px; }
  .lk-toast .tt-toy__line { bottom: -214px; }
}

/* ---------- 5.10 Footer: morning, and the bouncing wordmark ---------- */
.lk-toast .tt-footer {
  position: relative;
  overflow: clip;
  padding-top: clamp(40px, 5vw, 64px);
  background: var(--tt-cream);
  color: var(--tt-ink);
}
.lk-toast .tt-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 4vw, 64px); }
.lk-toast .tt-footer .brand { margin: 0; min-height: 44px; }
.lk-toast .tt-footer__line { margin-top: 14px; max-width: 24em; font-size: 1rem; line-height: 1.5; color: var(--tt-ink-2); }
.lk-toast .tt-footer__addr { margin-top: 16px; font-size: 0.92rem; font-weight: 600; }
/* five columns; the family column is the only one whose links leave the site (new tabs) */
.lk-toast .tt-footer__cols { display: grid; grid-template-columns: repeat(5, max-content); gap: 24px clamp(28px, 2.6vw, 40px); }
.lk-toast .tt-footer__col h3 {
  margin-bottom: 10px;
  font-family: var(--tt-body);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--tt-hand-ink);
}
.lk-toast .tt-footer__col ul { list-style: none; margin: 0; padding: 0; }
.lk-toast .tt-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
.lk-toast .tt-footer__col a:hover { text-decoration: underline; text-decoration-color: var(--tt-ember); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.lk-toast .tt-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-top: clamp(36px, 4vw, 52px);
  padding: 14px 0;
  border-top: var(--tt-line);
  font-size: 0.9rem;
  font-weight: 600;
}
.lk-toast .tt-footer__bottom > * + *::before { content: "\00B7"; display: inline-block; padding: 0 12px; color: var(--tt-hand-ink); font-weight: 800; text-decoration: none; }
.lk-toast .tt-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.lk-toast .tt-footer__bottom a:hover { color: var(--tt-hand-ink); }
.lk-toast .tt-footer__td { margin-left: auto; }
.lk-toast .tt-footer__td::before { display: none !important; }
.lk-toast .tt-footer__giant {
  position: relative;
  margin-top: clamp(8px, 1.4vw, 20px);
  padding: 0 var(--tt-gutter);
  padding-bottom: clamp(18px, 2.6vw, 36px);
  text-align: center;
  line-height: 0.8;
}
.lk-toast .tt-footer__word {
  display: inline-block;
  padding-top: 0.1em;
  font-family: var(--tt-mark);
  font-size: min(15.5vw, 13.5rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lk-toast .tt-footer__word span { font-weight: 400; font-synthesis: none; }
.lk-toast .tt-footer__word i { display: inline-block; font-style: normal; font-weight: 400; font-synthesis: none; animation: tt-letter 3.6s var(--tt-ease) infinite; animation-delay: calc(var(--i) * 0.09s); }
.lk-toast .tt-footer__word { text-shadow: 0.03em 0.05em 0 #F4C58C; }
.lk-toast .tt-footer__shmo { color: var(--tt-ink); }
.lk-toast .tt-footer__leads { color: var(--tt-ember); -webkit-text-stroke: 0.012em var(--tt-ink); }

/* below a wide laptop the brand takes the top row and the five columns share the next */
@media (max-width: 1299px) {
  .lk-toast .tt-footer__top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lk-toast .tt-footer__brand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 40px; }
  .lk-toast .tt-footer__brand .brand { grid-row: span 2; }
  .lk-toast .tt-footer__line, .lk-toast .tt-footer__addr { margin-top: 0; }
  .lk-toast .tt-footer__line { max-width: 30em; }
  .lk-toast .tt-footer__cols { justify-content: space-between; column-gap: 24px; }
}
@media (max-width: 999px) {
  .lk-toast .tt-footer__brand { display: block; }
  .lk-toast .tt-footer__line { margin-top: 14px; max-width: 26em; }
  .lk-toast .tt-footer__addr { margin-top: 16px; }
  .lk-toast .tt-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
  /* the family runs across two columns, its five links in two short lists */
  .lk-toast .tt-footer__col--family { grid-column: span 2; }
  .lk-toast .tt-footer__col--family ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 20px; }
}
@media (max-width: 640px) {
  .lk-toast .tt-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-toast .tt-footer__td { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================================
   6. Dialogs: market check, booking, lightbox
   ========================================================================== */
.lk-toast .market-panel {
  padding-top: 50px;
  background: linear-gradient(180deg, var(--tt-toast-2) 0, var(--tt-toast-1) 16px, #FFF4E2 40px, var(--tt-mallow) 90px);
}
/* the look's p and h2 resets are stronger than core's dialog spacing, so restate it here */
.lk-toast .market-panel h2 { margin: 14px 0 14px; font-weight: 700; letter-spacing: -0.012em; }
.lk-toast .market-ask h2 { margin-top: 8px; }
.lk-toast .market-body { margin: 0 0 24px; color: var(--tt-ink-2); }
.lk-toast .market-note { margin: 4px 0 0; }
.lk-toast .market-err { margin: 6px 0 0; color: var(--tt-hand-ink); }
.lk-toast .market-chip { margin: 10px 0 0 10px; }
.lk-toast .market-kicker { color: var(--tt-hand-ink); opacity: 1; letter-spacing: 0.1em; }
.lk-toast .market-modal .market-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 5px 10px;
  border: 2px solid var(--tt-ink);
  border-radius: 999px;
  background: var(--tt-honey);
  color: var(--tt-ink);
  box-shadow: 3px 3px 0 var(--tt-ink);
}
.lk-toast .market-modal .market-badge::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.8px solid var(--tt-ink);
  border-radius: 4px 4px 5px 5px;
  background: linear-gradient(180deg, var(--tt-toast-3) 0 40%, var(--tt-mallow) 40%);
}
.lk-toast .market-modal.is-taken .market-badge { background: var(--tt-graham-soft); }
.lk-toast .market-modal.is-taken .market-badge::before { background: var(--tt-mallow); }
.lk-toast .market-chip { background: #FFFFFF; font-weight: 800; }
.lk-toast .market-form-modal label { font-size: 0.9rem; color: var(--tt-ink-2); }
.lk-toast .market-form-modal select,
.lk-toast .market-form-modal input { border-radius: 14px; }
.lk-toast .market-form-modal .btn { min-height: 54px; }
.lk-toast .market-note { color: var(--tt-ink-2); opacity: 1; }
.lk-toast .market-x, .lk-toast .book-x, .lk-toast .lb-x { background: var(--tt-mallow); box-shadow: 2px 2px 0 var(--tt-ink); cursor: pointer; }
.lk-toast .market-x:hover, .lk-toast .book-x:hover, .lk-toast .lb-x:hover { background: var(--tt-honey); }
.lk-toast .market-actions .btn { min-height: 52px; }
.lk-toast .book-bar { background: linear-gradient(180deg, var(--tt-toast-1), #FFF4E2); font-weight: 600; }
.lk-toast .book-spinner { border-top-color: var(--tt-ember); }
.lk-toast dialog.wall-lb .lb-cap { background: var(--tt-honey); color: var(--tt-ink); border: 2px solid var(--tt-ink); }

/* ==========================================================================
   7. Motion
   ========================================================================== */
@keyframes tt-flick-a {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  30% { transform: scale(0.96, 1.06) skewX(-2.5deg); }
  62% { transform: scale(1.03, 0.95) skewX(2deg); }
}
@keyframes tt-flick-b {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  40% { transform: scale(0.94, 1.09) skewX(3deg); }
  70% { transform: scale(1.04, 0.95) skewX(-2deg); }
}
@keyframes tt-flick-c {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(0.9, 1.12); }
}
@keyframes tt-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -140px)) scale(0.4); }
}
@keyframes tt-ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * var(--ex, 1)), var(--dy)) scale(0.35); }
}
@keyframes tt-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes tt-rays { to { transform: rotate(360deg); } }
@keyframes tt-cloud { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes tt-glow { 0%, 100% { opacity: 0.88; } 40% { opacity: 1; } 70% { opacity: 0.8; } }
@keyframes tt-flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(0.95); } }
@keyframes tt-sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
@keyframes tt-hop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-14%) scale(1.06, 0.96); }
  65% { transform: translateY(0) scale(0.96, 1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes tt-sparkle {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.15) rotate(30deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(80deg); }
}
@keyframes tt-halo { 0% { opacity: 0; transform: scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes tt-bump { 0% { transform: scale(1); } 38% { transform: scale(1.28) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes tt-nudge { 0%, 100% { translate: 0 0; } 40% { translate: 8px -6px; } }
@keyframes tt-wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -10deg; } 60% { rotate: 6deg; } }
@keyframes tt-squish {
  0% { transform: scale(1); }
  30% { transform: scale(1.14, 0.86); }
  60% { transform: scale(0.94, 1.08); }
  100% { transform: scale(1); }
}
@keyframes tt-puff {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) scale(1.4); }
}
@keyframes tt-sag { 0% { transform: scale(1); } 60% { transform: scale(1.04, 0.93); } 100% { transform: scale(1.02, 0.96); } }
@keyframes tt-fly {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  50% { opacity: 0.9; transform: translate(var(--fx), var(--fy)); }
  80% { opacity: 0.2; transform: translate(calc(var(--fx) * 0.4), calc(var(--fy) * 1.6)); }
}
@keyframes tt-dangle { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes tt-swing {
  0% { rotate: 2.4deg; }
  30% { rotate: -1.6deg; }
  55% { rotate: 0.9deg; }
  78% { rotate: -0.4deg; }
  100% { rotate: 0deg; }
}
@keyframes tt-ribbon { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tt-stars { from { opacity: 0.65; } to { opacity: 1; } }
@keyframes tt-bulb { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
@keyframes tt-letter {
  0%, 60%, 100% { transform: translateY(0); }
  68% { transform: translateY(-0.12em); }
  76% { transform: translateY(0.015em); }
  82% { transform: translateY(-0.03em); }
}
@keyframes tt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* the marker ring pops on when the clipping arrives (a dash draw-in miscounts under
   non-scaling strokes, so it scales in instead) */
.lk-toast .tt-roster__ring { transform-origin: 50% 50%; }
html.reveal-on .lk-toast .tt-post.in .tt-roster__ring { animation: tt-ring 0.7s var(--tt-spring) 0.45s both; }
@keyframes tt-ring { from { opacity: 0; transform: scale(0.9) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* anything that loops holds still while it is off screen (js adds .tt-off) */
.lk-toast .tt-off *, .lk-toast .tt-off *::before, .lk-toast .tt-off *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .lk-toast .tt-ribbon__track { animation: none; flex-wrap: wrap; width: auto; }
  .lk-toast .tt-ribbon__list { flex: 1 1 100%; min-width: 0; white-space: normal; padding: 14px 20px; text-align: center; }
  .lk-toast .tt-ribbon__band { padding-left: 3%; }
  .lk-toast .tt-ribbon__list[aria-hidden="true"], .lk-toast .tt-ribbon__btn { display: none; }
  .lk-toast .tt-ribbon__list::after { content: none; }
  .lk-toast .tt-ribbon__band { rotate: -0.8deg; }
  .lk-toast .tt-embers, .lk-toast .tt-sparks, .lk-toast .tt-flies { display: none; }
  .lk-toast .tt-lamp__flame, .lk-toast .tt-circle__lamp::before { animation: none; }
  .lk-toast .tt-rays, .lk-toast .tt-glints use, .lk-toast .tt-cloud__bob, .lk-toast .tt-banner, .lk-toast .tt-lantern,
  .lk-toast .tt-flame, .lk-toast .tt-flag__cloth, .lk-toast .tt-footer__word i, .lk-toast .tt-toy--camp .tt-toy__btn,
  .lk-toast .tt-lights__bulbs i, .lk-toast .tt-night__stars, .lk-toast .tt-portrait__glints svg { animation: none; }
}