/* Short-homepage proof bridge: full-bleed test-group wordmarks lead into pricing. */
.sales-content > .m-audiences{
  width:calc(100% + (var(--page-gutter) * 2));
  max-width:none;
  margin:0 calc(var(--page-gutter) * -1);
  background:var(--audience-paper);
  border-block:1px solid #25252226;
}

.sales-content > .m-audiences > p{
  min-height:64px;
  padding:20px var(--page-gutter);
  color:var(--ink);
}

.sales-content > .m-audiences .p-audience-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.sales-content > .m-audiences .p-wordmark{
  min-width:0;
  min-height:clamp(154px,15vw,214px);
  padding:28px clamp(18px,2vw,32px);
  overflow:hidden;
  background:var(--audience-paper);
  font-size:clamp(24px,2.25vw,40px);
  transition:background-color 220ms cubic-bezier(.16,1,.3,1),color 220ms cubic-bezier(.16,1,.3,1);
}

.sales-content > .m-audiences .p-wordmark.serif{
  font-size:clamp(26px,2.45vw,43px);
}

.sales-content > .m-audiences .p-wordmark.spaced{
  font-size:clamp(16px,1.45vw,25px);
}

.sales-content > .m-audiences .p-wordmark-name{
  min-width:0;
  max-width:100%;
  transition:transform 260ms cubic-bezier(.16,1,.3,1);
}

@media(hover:hover) and (pointer:fine){
  .sales-content > .m-audiences .p-wordmark:hover{
    position:relative;
    z-index:1;
    background:var(--plan-accent);
    color:var(--plan-accent-ink);
  }

  .sales-content > .m-audiences .p-wordmark:hover .p-wordmark-name{
    transform:scale(1.025);
  }
}

.sales-content > .m-audiences + .m-dark{
  padding-top:56px;
}

.sales-content > #beyond-selly + .m-section{
  padding-top:64px;
}

.sales-content > #beyond-selly + .m-section .m-heading{
  margin-bottom:40px;
}

@media(max-width:960px){
  .sales-content > .m-audiences .p-audience-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sales-content > .m-audiences .p-wordmark{
    min-height:142px;
    padding-inline:20px;
    font-size:clamp(23px,4.6vw,36px);
  }

  .sales-content > .m-audiences .p-wordmark.serif{
    font-size:clamp(26px,5.2vw,39px);
  }

  .sales-content > .m-audiences .p-wordmark.spaced{
    font-size:clamp(15px,3vw,23px);
  }
}

@media(max-width:760px){
  .sales-content > .m-audiences > p{
    min-height:56px;
    padding-block:16px;
  }

  .sales-content > .m-audiences .p-wordmark{
    min-height:126px;
    padding:18px 10px;
  }

  .sales-content > .m-audiences + .m-dark{
    padding-top:40px;
  }

  .sales-content > #beyond-selly + .m-section{
    padding-top:56px;
  }
}

@media(prefers-reduced-motion:reduce){
  .sales-content > .m-audiences .p-wordmark,
  .sales-content > .m-audiences .p-wordmark-name{
    transition:none;
  }

  .sales-content > .m-audiences .p-wordmark:hover .p-wordmark-name{
    transform:none;
  }
}

/* Film under the hero: peeks from the bottom and grows to full screen. No hold and no snap (20 Oct): Marko wants the page to move the moment you scroll on. */
.p-film{height:100svh;margin-top:-5svh}
/* The film keeps its own 16:9 shape at a size YouTube streams sharply; it is never cropped or stretched to fill the screen. */
.p-film-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center}
.p-film-frame{position:relative;width:min(100%,calc((100svh - 96px) * 16 / 9));aspect-ratio:16/9;overflow:hidden;background:#080808;transform-origin:50% 50%;will-change:transform}
/* YouTube picks its stream by player size, so the player is drawn at double size and shrunk: it streams 1440p/4K, not 720p.
   It never takes the pointer, so YouTube's hover UI never shows. */
.p-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#080808;cursor:pointer}
/* Covers YouTube's loading screen, title bar and pause screen; lifts only while the film is really playing. */
.p-film-cover{position:absolute;inset:0;background:#080808 center/cover no-repeat;transition:opacity .45s ease;pointer-events:none}
/* Upright phones get only the tall poster (same test as hero-scroll.js), not both. */
@media not all and (max-width:760px) and (orientation:portrait){.p-film-cover{background-image:url(/assets/film/mockallies-film-poster.jpg)}}
/* Phones held upright play the 9:16 cut instead, as tall as the screen allows. */
.p-film-frame.is-tall{width:min(100%,calc((100svh - 32px) * 9 / 16));aspect-ratio:9/16}
.p-film-frame.is-tall .p-film-cover{background-image:url(/assets/film/mockallies-film-poster-tall.jpg)}
.p-film-frame.is-playing .p-film-cover{opacity:0}
.p-film-frame.is-dark .p-film-cover{background-image:none}
.p-film-sound{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:10px 16px;border:1px solid #b9b9b5;border-radius:4px;background:#080808cc;color:#efefec;font:500 14px/1 Geist,sans-serif;cursor:pointer}
.p-film-sound[hidden]{display:none}
.p-film-sound:hover{background:#202023}
.p-film-sound:focus-visible{outline:2px solid #efefec;outline-offset:2px}
.p-film + .p-selly{margin-top:0;padding-top:96px}
@media(max-width:760px){.p-film-sound{bottom:16px;font-size:13px}.p-film + .p-selly{padding-top:56px}}

/* Product tour: one section, four features. The numbered list picks a feature; its card and the panel's line-drawn miniature follow.
   Each miniature plays once while the progress bar fills (--tour-time), then the next feature takes over (homepage-short.js). */
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist/GeistMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@property --tm-s{syntax:"<integer>";inherits:false;initial-value:22}
.p-tour{--tour-time:8s;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--line:#33332f;--dim:#8d8d87;--text:#d8d8d3;--box:#0e0e0d;--orange:var(--plan-accent);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto minmax(0,1fr);gap:40px 24px;height:clamp(660px,calc(100svh - 96px),800px);max-width:1600px;margin-inline:auto}
.p-tour-intro{grid-column:1;grid-row:1;max-width:620px}
.p-tour-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 26px!important;font:400 12px/1 var(--mono);text-transform:uppercase;color:#efefec}
.p-tour-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.sales-content .p-tour h2{font-size:clamp(38px,3.7vw,56px);line-height:1.04}
.p-tour-intro > p:last-child{margin-top:24px;max-width:28em;font-size:17px;line-height:1.5;color:#b9b9b3}

.p-tour-foot{grid-column:1;grid-row:2;align-self:end;display:grid;grid-template-columns:auto minmax(0,440px);justify-content:space-between;align-items:end;gap:24px}
.p-tour-progress{display:inline-flex;gap:4px;margin-bottom:18px;padding:3px;border:1px solid #4a4a45;border-radius:99px}
.p-tour-progress i{position:relative;width:8px;height:8px;overflow:hidden;border-radius:99px;background:#4a4a45;transition:width .45s cubic-bezier(.16,1,.3,1)}
.p-tour-progress i.is-active{width:32px}
.p-tour-progress b{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
.p-tour-progress i.is-active b{animation:p-tour-fill var(--tour-time) linear both}
@keyframes p-tour-fill{to{transform:none}}
.p-tour-nav ol{list-style:none;margin:0;padding:0;display:grid}
.p-tour-nav button{display:flex;gap:8px;padding:5px 0;border:0;background:none;font:400 12px/1 var(--mono)!important;text-transform:uppercase;color:var(--dim);transition:color .2s}
.p-tour-nav button span{color:#4f4f4a;transition:color .2s}
.p-tour-nav button:hover{color:#efefec}
.p-tour-nav button[aria-current="true"]{color:var(--orange)}
.p-tour-nav button[aria-current="true"] span{color:#efefec}

.p-tour-cards{display:grid}
.p-tour-card{grid-area:1/1;display:flex;flex-direction:column;padding:20px 20px 22px;border:1px solid var(--line);border-radius:6px;background:#101010;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s .5s}
.p-tour-card.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .12s,transform .7s cubic-bezier(.16,1,.3,1) .12s,visibility 0s}
.p-tour-card-top{display:flex;justify-content:space-between;align-items:center;font:400 12px/1 var(--mono);text-transform:uppercase;color:var(--dim)}
.p-tour-card-top::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.sales-content .p-tour-card h3{margin-top:clamp(28px,5svh,52px)!important;font-size:24px;line-height:1.15}
.p-tour-card > p:not(.p-tour-card-top){margin-top:14px;font-size:16px;line-height:1.5;color:#b9b9b3}
.p-tour-more{align-self:flex-start;display:inline-flex;gap:8px;margin-top:22px;padding:7px 12px;border-radius:4px;background:#f7f6f2;color:#080808!important;font:400 12px/1 var(--mono);text-transform:uppercase;text-decoration:none;transition:background-color .2s}
.p-tour-more:hover{background:var(--orange)}

.p-tour-panel{grid-column:2;grid-row:1/3;position:relative;min-height:0;overflow:hidden;border:1px dashed #66665f;border-radius:6px;background:#050505;container-type:size}
.p-tour-panel::before{content:"";position:absolute;top:16px;left:16px;z-index:1;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.p-tour-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.p-tour-scene.is-active{opacity:1;visibility:visible;transition:opacity .5s ease .1s,visibility 0s}
.p-tour-scene-top,.p-tour-scene-foot{position:absolute;left:16px;right:16px;display:flex;justify-content:space-between;gap:16px;margin:0!important;font:400 12px/1.2 var(--mono);text-transform:uppercase;color:var(--dim)}
.p-tour-scene-top{top:14px;justify-content:flex-end}
.p-tour-scene-foot{bottom:16px;align-items:baseline;font-size:13px}
.p-tour-scene-foot b{font-weight:400;color:#efefec}
.p-tour-scene-foot span{text-transform:none}

/* Miniatures: drawn at 420px and scaled to the panel, so they stay sharp. Each element's resting style is its finished state;
   the animations only run while the scene is active, so reduced motion gets the finished picture. */
.tm{position:absolute;left:50%;top:48%;width:420px;transform:translate(-50%,-50%) scale(var(--tm-scale,1));border:1px solid var(--line);border-radius:8px;background:var(--box);font:400 11px/1.45 var(--mono);letter-spacing:-.01em;color:var(--dim);text-align:left}
@container (min-width:600px) and (min-height:620px){.tm{--tm-scale:1.22}}
@container (max-width:560px){.tm{--tm-scale:.86}}
@container (max-height:470px){.tm{--tm-scale:.76}}
@container (max-width:470px){.tm{--tm-scale:.76}}
@container (max-width:400px){.tm{--tm-scale:.68}}
@container (max-width:340px){.tm{--tm-scale:.6}}
.tm p,.tm ol,.tm ul{margin:0;padding:0;list-style:none}
.tm b{font-weight:400;color:#efefec}
.tm svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:34px;padding:0 12px;border-bottom:1px solid var(--line);text-transform:uppercase}
.tm-pad{padding:14px 14px 16px}
.tm-kick{text-transform:uppercase;color:var(--dim)}
.tm-live{display:flex;align-items:center;gap:7px;color:#efefec}
.tm-live i{width:6px;height:6px;border-radius:50%;background:var(--orange)}
.tm-live.is-off i{background:#4f4f4a}
.tm-go{display:inline-block;padding:6px 10px;border:1px solid var(--orange);border-radius:4px;color:var(--orange);text-transform:uppercase}
@keyframes tm-in{from{opacity:0;transform:translateY(6px)}}
.p-tour-scene.is-active :is(.tm-lines li,.tm-checks li,.tm-fix,.tm-quote,.tm-foot .tm-go){animation:tm-in .5s cubic-bezier(.16,1,.3,1) var(--at) both}

/* 01 calls: the buyer brushes you off, you ask why, they open up. */
.tm-call .tm-live i{animation:tm-blink 1.6s ease-in-out infinite}
@keyframes tm-blink{50%{opacity:.25}}
.tm-timer{--tm-s:22;counter-reset:s var(--tm-s)}
.tm-timer::after{content:"00:" counter(s,decimal-leading-zero)}
.p-tour-scene.is-active .tm-timer{animation:tm-clock var(--tour-time) linear both}
@keyframes tm-clock{from{--tm-s:14}to{--tm-s:22}}
.tm-mode{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.tm-mode > *{padding:3px 7px}
.tm-mode b{background:#1d1d1b}
.tm-people{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.tm-who{display:flex;align-items:center;gap:8px;height:52px;padding:0 12px}
.tm-who + .tm-who{border-left:1px solid var(--line)}
.tm-who svg{flex:none;width:26px;height:26px;padding:3px;border:1px solid var(--line);border-radius:50%}
.tm-wave{display:flex;align-items:center;gap:2px;height:22px;margin-left:auto;transform:scaleY(.1)}
.tm-wave i{width:2px;height:100%;border-radius:2px;background:#efefec;animation:tm-bars .45s ease-in-out infinite alternate}
.tm-you .tm-wave i{background:var(--orange)}
.tm-wave i:nth-child(3n){animation-duration:.38s;height:60%}
.tm-wave i:nth-child(3n+1){animation-duration:.52s;height:80%}
.tm-wave i:nth-child(4n){animation-delay:-.2s}
@keyframes tm-bars{from{transform:scaleY(.35)}}
.p-tour-scene.is-active .tm-buyer .tm-wave{animation:tm-buyer-talk var(--tour-time) linear both}
.p-tour-scene.is-active .tm-you .tm-wave{animation:tm-you-talk var(--tour-time) linear both}
@keyframes tm-buyer-talk{0%,7%{transform:scaleY(.1)}9%,24%{transform:none}26%,57%{transform:scaleY(.1)}59%,73%{transform:none}75%,100%{transform:scaleY(.1)}}
@keyframes tm-you-talk{0%,32%{transform:scaleY(.1)}34%,49%{transform:none}51%,100%{transform:scaleY(.1)}}
.tm-lines{display:grid;gap:9px;padding:14px!important;min-height:112px}
.tm-lines li{display:grid;grid-template-columns:52px 1fr;color:var(--text)}
.tm-lines li span{text-transform:uppercase;color:var(--dim)}
.tm-lines li.is-you span{color:var(--orange)}
.tm-ctrl{display:flex;gap:8px;padding:0 14px 14px;text-transform:uppercase}
.tm-ctrl span{padding:6px 10px;border:1px solid var(--line);border-radius:4px}
.tm-ctrl .tm-end{margin-left:auto;border-color:var(--orange);color:var(--orange)}

/* 02 coach: what worked lands one line at a time, then the one fix, the moment it came from, and the way back in. */
.tm-checks{display:grid;gap:7px;margin:9px 0 14px!important}
.tm-checks li{display:flex;align-items:center;gap:8px;color:var(--text)}
.tm-checks svg{flex:none;width:14px;height:14px;padding:1px;border:1px solid var(--line);border-radius:3px;color:var(--orange)}
.tm-fix{padding:10px 12px;border:1px solid var(--line);border-left:2px solid var(--orange);border-radius:4px}
.tm-fix .tm-kick{color:var(--orange)}
.tm-fix p + p{margin-top:5px;color:#efefec}
.tm-quote{display:flex;gap:10px;margin-top:12px!important;color:var(--text)}
.tm-quote span{flex:none;text-transform:uppercase;color:var(--dim)}
.tm-quote mark{padding:0 2px;color:inherit;background:linear-gradient(#ff6b2b40,#ff6b2b40) no-repeat 0 0/100% 100%}
.p-tour-scene.is-active .tm-quote mark{animation:tm-mark .9s cubic-bezier(.65,0,.35,1) calc(var(--at) + .5s) both}
@keyframes tm-mark{from{background-size:0 100%}}
.tm-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--line);text-transform:uppercase}

/* 03 academy: the lesson, a knowledge check, then the practice call it unlocks; lesson four ticks off on the path. */
.tm-steps{display:flex;gap:3px}
.tm-steps i{width:14px;height:3px;border-radius:2px;background:var(--orange)}
.tm-steps i.is-now ~ i{background:#3a3a36}
.p-tour-scene.is-active .tm-steps i.is-now{animation:tm-step var(--tour-time) linear both}
@keyframes tm-step{0%,66%{background:#3a3a36}70%,100%{background:var(--orange)}}
.tm-split{display:grid;grid-template-columns:168px 1fr;min-height:206px}
.tm-path{display:grid;align-content:start;gap:9px;padding:14px 12px!important;border-right:1px solid var(--line)}
.tm-path li{position:relative;padding-left:16px;color:#5f5f5a}
.tm-path li::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border:1px solid #4f4f4a;border-radius:50%}
.tm-path li.is-done{color:var(--dim)}
.tm-path li.is-done::before,.tm-path li.is-now::before{border-color:var(--orange);background:var(--orange)}
.tm-path li.is-now{color:#efefec}
.p-tour-scene.is-active .tm-path li.is-now::before{animation:tm-dot var(--tour-time) linear both}
@keyframes tm-dot{0%,66%{background:transparent}70%,100%{background:var(--orange)}}
.tm-stage{display:grid;padding:14px}
.tm-step{grid-area:1/1;display:flex;flex-direction:column;gap:8px;opacity:0}
.tm-step b{font-size:13px;line-height:1.3;font-family:Geist,sans-serif;letter-spacing:-.01em}
.tm-drill{opacity:1}
.tm-drill > span:not(.tm-go){color:var(--text)}
.tm-drill .tm-go{align-self:flex-start;margin-top:6px}
.tm-lines-skel{display:grid;gap:6px;margin-top:4px}
.tm-lines-skel i{height:5px;border-radius:3px;background:#262623}
.tm-lines-skel i:nth-child(2){width:86%}.tm-lines-skel i:nth-child(4){width:64%}
.tm-meter{height:3px;margin-top:auto;border-radius:2px;background:#262623;overflow:hidden}
.tm-meter i{display:block;height:100%;background:var(--orange);transform-origin:0 50%}
.tm-quiz ul{display:grid;gap:5px}
.tm-quiz li{padding:5px 8px;border:1px solid var(--line);border-radius:4px;color:var(--text)}
.tm-quiz li.is-pick{border-color:var(--orange);color:#efefec}
.p-tour-scene.is-active .tm-read{animation:tm-read var(--tour-time) linear both}
.p-tour-scene.is-active .tm-quiz{animation:tm-quiz var(--tour-time) linear both}
.p-tour-scene.is-active .tm-drill{animation:tm-drill var(--tour-time) linear both}
.p-tour-scene.is-active .tm-meter i{animation:tm-meter calc(var(--tour-time) * .28) linear .3s both}
.p-tour-scene.is-active .tm-quiz li.is-pick{animation:tm-pick var(--tour-time) linear both}
@keyframes tm-read{0%{opacity:0;transform:translateY(6px)}3%,31%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes tm-quiz{0%,34%{opacity:0;transform:translateY(6px)}38%,63%{opacity:1;transform:none}67%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes tm-drill{0%,66%{opacity:0;transform:translateY(6px)}70%,100%{opacity:1;transform:none}}
@keyframes tm-meter{from{transform:scaleX(0)}}
@keyframes tm-pick{0%,50%{border-color:var(--line);color:var(--text)}53%,100%{border-color:var(--orange);color:#efefec}}

/* 04 Selly chat: the question is typed and sent, then Selly's answer and the opener stream in. */
.tm-name{display:flex;align-items:center;gap:7px}
.tm-name i{width:7px;height:7px;background:var(--orange)}
.tm-thread{display:grid;gap:12px;min-height:236px;align-content:start}
.tm-ask{justify-self:end;max-width:250px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#1a1a18;color:#efefec}
.tm-reply{display:grid;gap:10px;color:var(--text)}
.tm-opener{padding:10px 12px;border:1px solid var(--line);border-radius:6px}
.tm-opener .tm-kick{margin-bottom:5px;color:var(--orange)}
.tm-opener p + p{color:#efefec}
.tm-input{position:relative;display:flex;align-items:center;height:42px;margin:0 10px 10px;padding:0 6px 0 12px;border:1px solid var(--line);border-radius:6px}
.tm-hint{color:#5f5f5a}
.tm-type{position:absolute;left:12px;width:0;overflow:hidden;white-space:nowrap;color:#efefec;opacity:0}
.tm-send{display:grid;place-items:center;width:26px;height:26px;margin-left:auto;border-radius:5px;background:#262623;color:#080808}
.tm-send svg{width:12px;height:12px;stroke-width:1.8}
.p-tour-scene.is-active .tm-type{animation:tm-type var(--tour-time) both}
.p-tour-scene.is-active .tm-hint{animation:tm-hint var(--tour-time) linear both}
.p-tour-scene.is-active .tm-send{animation:tm-send var(--tour-time) linear both}
.p-tour-scene.is-active .tm-ask{animation:tm-in .45s cubic-bezier(.16,1,.3,1) 2.55s both}
@keyframes tm-type{0%,3%{width:0;opacity:1;animation-timing-function:steps(45,end)}28%{width:45ch;opacity:1;animation-timing-function:linear}31%,100%{width:45ch;opacity:0}}
@keyframes tm-hint{0%,30%{opacity:0}33%,100%{opacity:1}}
@keyframes tm-send{0%,3%{background:#262623}5%,30%{background:var(--orange)}33%,100%{background:#262623}}
[data-stream] span{display:inline}
.p-tour-scene.is-active [data-stream] span{animation:tm-word .5s ease both;animation-delay:calc(var(--from) + var(--i) * 55ms)}
@keyframes tm-word{0%{opacity:0;color:var(--orange)}35%{opacity:1;color:var(--orange)}}

.p-tour.is-paused :is(*,*::before,*::after){animation-play-state:paused!important}

@media(max-width:1100px){
  .p-tour{height:auto;grid-template-rows:auto auto;min-height:0}
  .p-tour-intro{grid-column:1/-1}
  .p-tour-panel{grid-row:2;min-height:0}
  .p-tour-foot{grid-template-columns:minmax(0,1fr)}
  .p-tour-cards{order:-1}
}
/* Pinned on a short tablet/laptop screen the section padding pushed the tour past the window; the pin already centres it. */
@media(min-width:768px) and (max-width:1100px) and (max-height:900px){
  .sales-content > #beyond-selly + .p-tour{padding-block:0}
  .p-tour{row-gap:24px}
}
@media(max-width:760px){
  .p-tour{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:20px}
  .p-tour-intro,.p-tour-panel,.p-tour-foot{grid-column:1;grid-row:auto}
  .sales-content .p-tour h2{font-size:clamp(32px,9vw,40px)}
  .p-tour-intro > p:last-child{margin-top:16px;font-size:16px}
  .p-tour-eyebrow{margin-bottom:18px!important}
  .p-tour-panel{min-height:0;height:clamp(330px,92vw,400px)}
  .p-tour-foot{gap:20px}
  .p-tour-card{padding:16px 16px 18px}
  .sales-content .p-tour-card h3{margin-top:24px!important;font-size:22px}
  .p-tour-card > p:not(.p-tour-card-top){font-size:15px}
  .p-tour-cards{order:0}
  .p-tour-progress{margin-bottom:12px}
  .p-tour-nav ol{grid-template-columns:1fr 1fr;column-gap:16px}
  .p-tour-nav button{padding:8px 0}
}
@media(prefers-reduced-motion:reduce){
  .p-tour :is(*,*::before,*::after){animation:none!important;transition:none!important}
  .p-tour-progress i.is-active b{transform:none}
}