/* Shared visual-fit layer for the “What York handles” stories.
   The scrolling model stays identical; this file only balances the preview stage. */

.bwyh[data-handles-story]{
  --bwyh-fit-pad:32px;
  --bwyh-fit-gap:14px;
  --bwyh-stage-half-height:316px;
  --bwyh-stage-top-min:88px;
}
.bwyh:is([data-handles-fit="brand"],[data-handles-fit="listening"],[data-handles-fit="reports"]){
  --bwyh-stage-half-height:234px;
  --bwyh-stage-top-min:104px;
}
.bwyh[data-handles-fit="radar"]{
  --bwyh-stage-half-height:264px;
  --bwyh-stage-top-min:104px;
}
.bwyh[data-handles-fit="planner"]{
  --bwyh-stage-half-height:223px;
  --bwyh-stage-top-min:104px;
}

/* The left chapter already explains the reasoning. Repeating it above the
   product preview made the sentence look detached from the card. */
.bwyh[data-handles-story] .bwyh-why{display:none}

/* One chapter hierarchy on every agent page: number → title → story → proof.
   The small all-caps category added a fourth type style without adding meaning. */
.bwyh[data-handles-story] .bwyh-item > .label{display:none}
.bwyh[data-handles-story] .bwyh-item > h3{margin-top:20px}
.bwyh[data-handles-story] .bwyh-proof{
  display:flex;
  align-items:flex-start;
  gap:9px;
  max-width:38ch;
  margin-top:22px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.45;
  color:#5B4C43;
}
.bwyh[data-handles-story] .bwyh-proof::before{
  content:"";
  width:7px;
  height:7px;
  margin-top:5px;
  border-radius:50%;
  background:#DD6500;
  box-shadow:0 0 0 4px rgba(221,101,0,.12);
  flex:none;
}

.bwyh[data-handles-story] .bwyh-panel{
  gap:var(--bwyh-fit-gap);
}
.bwyh[data-handles-story] .bwyh-flag{
  align-self:flex-start;
  width:max-content;
  max-width:100%;
  margin:0;
  flex:none;
}
.bwyh[data-handles-story] .bwyh-card{
  width:100%;
  margin-inline:auto;
}
.bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-ref-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-ref-summary{
  font-size:11.5px;
  font-weight:400;
  line-height:1.4;
  color:var(--lp-text-secondary,#6F625A);
}

@media (min-width:1024px) and (min-height:701px) and (prefers-reduced-motion:no-preference){
  /* Keep the capped stage centered below the 60px nav on tall displays.
     Sticky positioning still lets the story section constrain both ends. */
  .bwyh[data-handles-story] .bwyh-art{
    top:max(var(--bwyh-stage-top-min),calc(50vh + 30px - var(--bwyh-stage-half-height)));
  }
  .bwyh[data-handles-story] .bwyh-item::before{display:none}
  .bwyh[data-handles-story] .bwyh-item > h3{position:relative}
  .bwyh[data-handles-story] .bwyh-item > h3::before{
    content:"";
    position:absolute;
    inset:4px auto 4px -28px;
    width:2px;
    border-radius:2px;
    background:#DD6500;
    clip-path:inset(max(0px,calc(50% - 20px)) 0);
    opacity:.45;
    transition:clip-path .36s cubic-bezier(.22,1,.36,1),opacity .25s ease;
  }
  .bwyh[data-handles-story] .bwyh-item.is-on > h3::before{
    clip-path:inset(0);
    opacity:1;
  }
}

@media (min-width:1024px) and (min-height:701px){
  .bwyh[data-handles-story] .bwyh-panel{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    padding:var(--bwyh-fit-pad);
  }

  /* Page-level density: native/social previews need slightly more canvas;
     text artifacts use a calmer 32px inset. */
  .bwyh[data-handles-fit="x"]{--bwyh-fit-pad:32px}
  .bwyh[data-handles-fit="writer"],
  .bwyh[data-handles-fit="creative"],
  .bwyh[data-handles-fit="research"],
  .bwyh[data-handles-fit="analytics"],
  .bwyh[data-handles-fit="planner"],
  .bwyh[data-handles-fit="engagement"]{--bwyh-fit-pad:32px}
  .bwyh[data-handles-fit="linkedin"]{--bwyh-fit-pad:30px}
  /* Brand's panels carry a visual-identity strip (logo + swatches + thumbs)
     on top of the document body, so the card needs more of the stage. */
  .bwyh[data-handles-fit="brand"]{--bwyh-fit-pad:26px}
  /* Listening's panels are text + metric rows, so they sit calmer in a wider inset. */
  .bwyh[data-handles-fit="listening"]{--bwyh-fit-pad:30px}
  /* Reports panels are metric tables; a tighter inset keeps the table wide. */
  .bwyh[data-handles-fit="reports"]{--bwyh-fit-pad:26px}
  /* Radar panels mix a headline, weight bars and source rows; 28px sits between. */
  .bwyh[data-handles-fit="radar"]{--bwyh-fit-pad:28px}
  .bwyh[data-handles-fit="facebook"],
  .bwyh[data-handles-fit="tiktok"],
  .bwyh[data-handles-fit="youtube"]{--bwyh-fit-pad:28px}
  .bwyh[data-handles-fit="instagram"]{--bwyh-fit-pad:20px 22px}

  /* York's review actions share one compact desktop control size. Native
     platform controls (Follow, Subscribe, Like, etc.) remain untouched. */
  .bwyh[data-handles-story] :is(.bwyh-btn,.axw-btn,.yts-review-btn){
    box-sizing:border-box;
    height:36px;
    min-height:36px;
    padding:0 13px;
    border-radius:999px;
    font-size:11.5px;
    line-height:1;
    white-space:nowrap;
  }
  .bwyh[data-handles-story] :is(.bwyh-gate .btns,.axw-actions,.yts-review-actions){gap:6px}

  /* X: keep the native post scale, but give the shortest post and weekly
     queue enough visual weight to match the reply state. */
  .bwyh[data-handles-fit="x"] .bwyh-card{
    min-height:360px;
    display:flex;
    flex-direction:column;
  }
  .bwyh[data-handles-fit="x"] .bwyh-card-in{
    flex:1;
    display:flex;
    align-items:center;
  }
  .bwyh[data-handles-fit="x"] .x-native,
  .bwyh[data-handles-fit="x"] .ax-show-rhythm{width:100%}
  .bwyh[data-handles-fit="x"] .bwyh-gate{margin-top:auto}
  .bwyh[data-handles-fit="x"] #bpanel-rhythm .ax-show-row{padding-block:16px}

  /* Writer / Creative / Research / Analytics / Engagement: only expand the
     sparse states. The already-dense first/second states keep natural height. */
  .bwyh[data-handles-fit="writer"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-card,
  .bwyh[data-handles-fit="creative"] :is(#cpanel-image,#cpanel-remix) .bwyh-card,
  .bwyh[data-handles-fit="research"] :is(#rpanel-map,#rpanel-tear) .bwyh-card,
  .bwyh[data-handles-fit="analytics"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-card,
  .bwyh[data-handles-fit="engagement"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-card{
    min-height:360px;
    display:flex;
    flex-direction:column;
  }
  .bwyh[data-handles-fit="writer"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-card-in,
  .bwyh[data-handles-fit="creative"] :is(#cpanel-image,#cpanel-remix) .bwyh-card-in,
  .bwyh[data-handles-fit="research"] :is(#rpanel-map,#rpanel-tear) .bwyh-card-in,
  .bwyh[data-handles-fit="analytics"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-card-in,
  .bwyh[data-handles-fit="engagement"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-card-in{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .bwyh[data-handles-fit="writer"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-gate,
  .bwyh[data-handles-fit="creative"] :is(#cpanel-image,#cpanel-remix) .bwyh-gate,
  .bwyh[data-handles-fit="research"] :is(#rpanel-map,#rpanel-tear) .bwyh-gate,
  .bwyh[data-handles-fit="analytics"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-gate,
  .bwyh[data-handles-fit="engagement"] :is(#wpanel-rewrite,#wpanel-answer) .bwyh-gate{margin-top:auto}

  .bwyh[data-handles-fit="writer"] #wpanel-answer .wr4-verdict,
  .bwyh[data-handles-fit="analytics"] #wpanel-answer .wr4-verdict,
  .bwyh[data-handles-fit="engagement"] #wpanel-answer .wr4-verdict{font-size:28px}

  .bwyh[data-handles-fit="creative"] #cpanel-image .cr4-imgrow{width:100%;align-items:center}
  .bwyh[data-handles-fit="creative"] #cpanel-image .cr4-one{width:172px}
  /* Creative 03 reads as a deliberate reference → original comparison,
     rather than a narrow stack floating in a tall card. */
  .bwyh[data-handles-fit="creative"] #cpanel-remix .bwyh-card{min-height:380px}
  .bwyh[data-handles-fit="creative"] #cpanel-remix .bwyh-card-in{
    display:grid;
    grid-template-columns:minmax(0,.88fr) 30px minmax(0,1.12fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"ref arrow label" "ref arrow orig";
    column-gap:10px;
    row-gap:8px;
    align-items:stretch;
    padding:22px 20px 20px;
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .bwyh-card-in::after{
    content:"→";
    grid-area:arrow;
    align-self:center;
    justify-self:center;
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#FBF0E3;
    color:#A8500C;
    font:700 17px/1 'Inter',sans-serif;
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-ref{
    grid-area:ref;
    align-self:stretch;
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:18px 16px;
    border-radius:14px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-ref-body{
    min-width:0;
    align-self:center;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-ref-body strong{
    font-size:10px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#6F625A;
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-ref .u{
    display:block;
    line-height:1.45;
    word-break:break-word;
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-ref-summary{
    font-size:12px;
    font-weight:400;
    line-height:1.45;
    color:var(--lp-text-secondary,#6F625A);
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-to{
    grid-area:label;
    align-self:end;
    margin:0;
    line-height:1;
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-orig{
    grid-area:orig;
    display:grid;
    grid-template-columns:1fr;
    align-content:center;
    gap:10px;
    padding:14px;
    border:1px solid rgba(221,101,0,.30);
    border-radius:14px;
    background:#fff;
    box-shadow:0 12px 26px -22px rgba(38,18,8,.35);
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-orig .cr-frame{
    width:100%;
    aspect-ratio:4/3;
    border-radius:10px;
  }
  .bwyh[data-handles-fit="creative"] #cpanel-remix .cr4-orig p{font-size:12.5px;line-height:1.45}
  .bwyh[data-handles-fit="research"] #rpanel-map .rs4-row{padding-block:11px}
  .bwyh[data-handles-fit="research"] #rpanel-tear .rs4-ex-row{padding-block:10px}

  /* LinkedIn: York review controls and the native post now form one shell,
     instead of three floating strips at a narrow fixed width. */
  #agentDetail.is-li .bwyh[data-handles-fit="linkedin"] .axw-card{
    width:min(520px,100%);
    min-height:430px;
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--lp-line-strong,#E6DED5);
    border-radius:16px;
    box-shadow:0 1px 2px rgba(38,18,8,.05),0 20px 44px -28px rgba(38,18,8,.22);
    overflow:hidden;
  }
  #agentDetail.is-li .bwyh[data-handles-fit="linkedin"] :is(.axw-top,.axw-foot,.li-native-post.is-workbench){
    width:100%;
    max-width:none;
    margin:0;
  }
  #agentDetail.is-li .bwyh[data-handles-fit="linkedin"] .axw-top{
    padding:10px 14px;
    border-bottom:1px solid var(--lp-line,#EFEEE7);
  }
  #agentDetail.is-li .bwyh[data-handles-fit="linkedin"] .axw-foot{
    margin-top:auto;
    padding:12px 14px;
    border-top:1px solid var(--lp-line,#EFEEE7);
  }
  #agentDetail.is-li .bwyh[data-handles-fit="linkedin"] .li-native-post.is-workbench{
    flex:1;
    display:flex;
    flex-direction:column;
    border:0;
    border-radius:0;
  }
  #agentDetail.is-li .bwyh[data-handles-fit="linkedin"] .li-native-post.is-workbench .li-native-summary{margin-top:auto}

  /* Facebook: the native feed post is the dense benchmark. The weekly queue
     receives the missing visual weight through real row spacing. */
  .bwyh[data-handles-fit="facebook"] #bpanel-rhythm .bwyh-card{
    min-height:380px;
    display:flex;
    flex-direction:column;
  }
  .bwyh[data-handles-fit="facebook"] #bpanel-rhythm .bwyh-card-in{flex:1;display:flex;align-items:center}
  .bwyh[data-handles-fit="facebook"] #bpanel-rhythm .ax-show-rhythm{width:100%}
  .bwyh[data-handles-fit="facebook"] #bpanel-rhythm .ax-show-row{padding-block:16px}
  .bwyh[data-handles-fit="facebook"] #bpanel-rhythm .bwyh-gate{margin-top:auto}

  /* Instagram: feed/comments use the shared vertical grammar. Panel 03 keeps
     a complete compact phone—profile, grid, bottom nav and safe area—so it is
     unmistakably Instagram without returning to the old undersized mockup. */
  .bwyh[data-handles-fit="instagram"] :is(#bpanel-post,#bpanel-community,#bpanel-rhythm){
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
  }
  .bwyh[data-handles-fit="instagram"] #bpanel-post .bwyh-card{max-width:380px}
  .bwyh[data-handles-fit="instagram"] #bpanel-post .bwyh-flag{align-self:center;width:min(100%,380px)}
  .bwyh[data-handles-fit="instagram"] #bpanel-post .ign-post-shell{width:240px}
  .bwyh[data-handles-fit="instagram"] #bpanel-community .bwyh-card{max-width:480px}
  .bwyh[data-handles-fit="instagram"] #bpanel-community .bwyh-flag{align-self:center;width:min(100%,480px)}
  .bwyh[data-handles-fit="instagram"] #bpanel-community .ign-comments{min-height:340px;display:flex;flex-direction:column}
  .bwyh[data-handles-fit="instagram"] #bpanel-community .ign-comment-list{flex:1}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm{padding:20px 22px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .bwyh-flag{display:none}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .bwyh-card{width:296px;max-width:100%}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .bwyh-gate{
    width:100%;
    max-width:none;
    margin-top:8px;
    padding-top:8px;
  }
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile{
    position:relative;
    display:block;
    width:296px;
    max-width:100%;
    padding-top:18px;
    border:5px solid #dfe5ef;
    border-radius:32px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 2px 5px rgba(28,32,40,.08),0 28px 58px -30px rgba(28,32,40,.34);
  }
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile::before{
    content:"";
    position:absolute;
    z-index:3;
    top:5px;
    left:50%;
    width:52px;
    height:12px;
    transform:translateX(-50%);
    border-radius:999px;
    background:#111;
  }
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-bar{
    height:34px;
    padding:0 10px;
  }
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-bar b{font-size:11.5px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-bar .ign-icon{width:17px;height:17px;margin-left:11px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-main{
    padding:8px 10px 7px;
  }
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-top{
    grid-template-columns:46px minmax(0,1fr);
    gap:8px;
  }
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-avatar{width:44px;height:44px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-avatar span{font-size:16px;border-width:2px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-stats{font-size:8.5px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-stats b{font-size:11.5px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-bio{
    max-height:31px;
    margin-top:6px;
    overflow:hidden;
    font-size:9px;
    line-height:1.3;
  }
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-buttons{grid-template-columns:1fr 1fr 24px;margin-top:6px;gap:5px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-buttons span{height:22px;font-size:8.5px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-tabs{height:28px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-tab .ign-icon{width:13px;height:13px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-grid{border-top:1px solid #efefef}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-bottomnav{height:32px;padding-inline:15px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-bottomnav .ign-icon{width:16px;height:16px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-bottomnav .ign-nav-profile{width:16px;height:16px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-safe{height:8px}
  .bwyh[data-handles-fit="instagram"] #bpanel-rhythm .ign-profile-safe::after{bottom:2px;width:68px}

  /* TikTok: enlarge the real native phone slightly; sparse review/queue cards
     grow through their content surfaces, never transform scaling. */
  .bwyh[data-handles-fit="tiktok"] #bpanel-post .yt-scene{width:min(100%,520px);margin-inline:auto;gap:24px}
  .bwyh[data-handles-fit="tiktok"] #bpanel-post .yt-phone{width:224px}
  .bwyh[data-handles-fit="tiktok"] #bpanel-post .yt-caption{max-width:206px}
  .bwyh[data-handles-fit="tiktok"] :is(#bpanel-community,#bpanel-rhythm) .bwyh-card{
    min-height:360px;
    display:flex;
    flex-direction:column;
  }
  .bwyh[data-handles-fit="tiktok"] :is(#bpanel-community,#bpanel-rhythm) .bwyh-card-in{flex:1;display:flex;flex-direction:column;justify-content:center}
  .bwyh[data-handles-fit="tiktok"] :is(#bpanel-community,#bpanel-rhythm) .bwyh-gate{margin-top:auto}
  .bwyh[data-handles-fit="tiktok"] #bpanel-rhythm .ax-show-row{padding-block:16px}

  /* YouTube Shorts: only the media itself is cropped. Each native surface has
     a complete outer edge and safe inset, so no UI looks arbitrarily sliced. */
  .bwyh[data-handles-fit="youtube"] :is(#bpanel-post,#bpanel-community,#bpanel-rhythm){
    padding:22px 24px;
    overflow:visible;
  }
  .bwyh[data-handles-fit="youtube"] #bpanel-post .yt-draft-stage{
    width:min(100%,520px);
    margin-inline:auto;
    grid-template-columns:220px minmax(0,1fr);
    gap:20px;
    padding:18px;
    border:1px solid #e5e5e5;
    border-radius:18px;
    background:#fff;
    box-shadow:0 2px 5px rgba(38,18,8,.05),0 22px 44px -34px rgba(38,18,8,.24);
    overflow:visible;
  }
  .bwyh[data-handles-fit="youtube"] #bpanel-post .ytpc-card{
    width:205px;
    max-width:100%;
    border-radius:16px;
    overflow:hidden;
  }
  .bwyh[data-handles-fit="youtube"] #bpanel-post .yt-draft-review{min-width:0;padding-right:2px}
  .bwyh[data-handles-fit="youtube"] #bpanel-post .yt-draft-review h3{font-size:23px}
  .bwyh[data-handles-fit="youtube"] #bpanel-post .yt-draft-review p{font-size:12px}
  .bwyh[data-handles-fit="youtube"] #bpanel-community .yt-comments-native{
    width:min(100%,520px);
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    padding:18px 20px;
    border:1px solid #e5e5e5;
    border-radius:16px;
    background:#fff;
    box-shadow:0 2px 5px rgba(38,18,8,.05),0 22px 44px -34px rgba(38,18,8,.24);
    overflow:visible;
  }
  .bwyh[data-handles-fit="youtube"] #bpanel-community .yt-york-reply{margin-top:auto}
  #agentDetail .bwyh[data-handles-fit="youtube"] #bpanel-community .yt-york-reply-foot .yts-review-btn{
    height:36px;
    min-height:36px;
    padding:0 13px;
    font-size:11.5px;
  }
  .bwyh[data-handles-fit="youtube"] #bpanel-rhythm .ytch-channel{
    box-sizing:border-box;
    width:min(100%,520px);
    margin-inline:auto;
    padding:12px 14px 14px;
    border:1px solid #e5e5e5;
    border-radius:16px;
    background:#fff;
    box-shadow:0 2px 5px rgba(38,18,8,.05),0 22px 44px -34px rgba(38,18,8,.24);
    overflow:visible;
  }
  .bwyh[data-handles-fit="youtube"] #bpanel-rhythm .ytch-banner{overflow:hidden}
  .bwyh[data-handles-fit="youtube"] #bpanel-rhythm .ytch-grid{padding-bottom:2px}
  .bwyh[data-handles-fit="youtube"] #bpanel-rhythm .ytch-card{overflow:visible}
}

@media (min-width:1024px) and (min-height:744px){
  .bwyh[data-handles-fit="instagram"] #bpanel-post .ign-post-shell{width:272px}
}

@media (max-width:1023px), (max-height:700px), (prefers-reduced-motion:reduce){
  .bwyh[data-handles-story] .bwyh-panel{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .bwyh[data-handles-story] .bwyh-flag{align-self:flex-start}
  /* Mobile controls keep a comfortable touch target even though the desktop
     review bar is intentionally more compact. */
  .bwyh[data-handles-story] :is(.bwyh-btn,.axw-btn,.yts-review-btn){
    height:44px;
    min-height:44px;
    padding-inline:14px;
  }
}

@media (max-width:640px){
  /* The compact agent pages share one mobile nav footprint. Hiding the two
     secondary actions prevents the five artifact pages from extending 24px
     beyond a 375px viewport. */
  #landingNav .landing-nav-discord,
  #landingNav .landing-login-btn{display:none}
  #landingNav .landing-nav-inner{padding-left:16px;padding-right:16px;gap:12px}
  #landingNav .landing-nav-actions{min-width:0;gap:4px;flex:none}
  #landingNav .landing-cta-sm{padding-left:12px;padding-right:12px}
  .lv-footer{
    height:auto;
    min-height:60px;
    padding:18px 16px;
    flex-direction:column;
    justify-content:center;
    gap:10px;
  }
  #agentDetail + .lv-footer .lv-footer-links,
  .lv-footer .lv-footer-links{
    width:100%;
    max-width:100%;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 16px;
    white-space:normal;
  }
}

/* Listening between 1024 and 1200: the competitor table and feed posts wrap, so
   the card needs more of the stage than the calm 30px inset allows.
   Appended last on purpose — same specificity as the rule above, so this wins
   only while its media query matches. */
@media (min-width:1024px) and (max-width:1200px) and (min-height:701px){
  .bwyh[data-handles-fit="listening"]{--bwyh-fit-pad:24px}
}