/* Shared component styles (owned by agent B "home+shared").
   Builds on the tokens and section patterns in site.css. */

/* Shared helpers */
.sec-head{max-width:760px;margin-bottom:48px}
.sec-head .lead{margin-top:16px}
.bg-mist{background:var(--mist)}
.bg-ink{background:var(--ink);color:var(--on-dark)}
.bg-ink h2,.bg-ink h3{color:#fff}

/* MRA explainer: copy first in the DOM, video sticky beside it */
.mra-explainer .explainer>div:first-child{position:static}
.mra-explainer__media{position:sticky;top:110px}
.mra-explainer--home .explainer{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.mra-explainer--home .mra-explainer__media{order:-1}
.mra-explainer .video-cap p{max-width:52ch}
.mra-explainer .video-cap .link{white-space:nowrap}

/* EBS video tutorials (dark on the homepage, light elsewhere) */
.ebs-tutorial + .ebs-tutorial{padding-top:0}
.ebs-tutorial + .ebs-tutorial .tutorial{padding-top:96px;border-top:1px solid rgba(255,255,255,.12)}
.ebs-tutorial .video{margin-top:28px}
.tut-light{background:var(--paper)}
.tut-light .chapters{background:var(--mist)}
.tut-light .chapters h3{color:var(--ink)}
.tut-light .chapters li a{color:var(--ink);border-top-color:var(--line)}
.tut-light .chapters .mono{color:var(--lagoon)}
.tut-light.ebs-tutorial + .ebs-tutorial .tutorial{border-top-color:var(--mist-2);padding-top:72px}
.tut-light .tutorial .intro>p.stamp{color:var(--muted)}

/* Product tiles shown outside the homepage bento */
.tile-band{padding:80px 0}
.tile-solo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.tile-solo .shot-link{margin:40px 40px 40px 0}

/* Featured video (homepage media, About) */
.featured-video__copy>p:not(.kicker){margin-top:16px;font-size:17px}
.featured-video__yt{display:inline-block;margin-top:22px}

/* API intro extra notes (blog placements) */
.api-more{max-width:72ch;margin-top:40px}
.api-more h3{font-size:24px;line-height:1.2}
.api-more p{margin-top:12px;font-size:16.5px}
.api-more code{font:400 14px var(--mono);background:var(--mist);padding:1px 6px;border-radius:4px;color:var(--ink)}

/* QuickBooks Desktop guides */
.qb-intro{font-size:17px}
.qb-feature>.video,.qb-feature>.qb-thumb{border-radius:var(--r)}
.qb-watch{margin-top:20px;white-space:normal;height:auto;min-height:42px;padding:10px 18px;text-align:center;line-height:1.3}
.qb-all{margin-top:32px;white-space:normal;height:auto;min-height:52px;padding:12px 24px;text-align:center;line-height:1.3}
.qb-embed li{grid-template-columns:200px 1fr}
.qb-embed .video{border-radius:10px;align-self:start}
.qb-embed .play{left:8px;bottom:8px;height:36px;padding:0 12px 0 5px;font-size:13px}
.qb-embed .play b{width:26px;height:26px}

/* Channel videos */
.channel-videos__list{display:grid;gap:48px}
.walk{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center}
.walk__thumb{display:block;border-radius:var(--r-lg);overflow:hidden}
.walk__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--ease)}
.walk__thumb:hover img{transform:scale(1.015)}
.walk h3{font-size:26px;line-height:1.15;letter-spacing:-.025em}
.walk h3 a{text-decoration:none}
.walk h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.walk .dur{font:500 13px/1 var(--mono);color:var(--lagoon);display:block;margin-top:12px}
.walk p{font-size:16px;margin-top:12px}
.walk .link{display:inline-block;margin-top:16px}
.all-videos{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}

/* Accounting partners */
.acct-partners{background:var(--mist)}
.acct-partners .avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--lime);color:var(--ink);font:700 18px/1 var(--display);letter-spacing:-.02em;flex:none}
.acct-partners .label{font:600 14px/1.4 var(--body);color:var(--lagoon)}
.partners-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start;margin-bottom:56px}
.contact-card{background:var(--lagoon);color:var(--on-dark);border-radius:var(--r-lg);padding:32px}
.contact-card .who{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.contact-card .label{color:var(--lime)}
.contact-card h2{color:#fff;font-size:34px;line-height:1.05;letter-spacing:-.03em;font-weight:800}
.contact-card .jrole{color:#fff;font-weight:600;margin-top:2px}
.contact-card .bio{font-size:16px;margin-top:6px}
.contact-card .addr{display:block;font-size:14.5px;color:var(--on-dark-2);margin-top:18px}
.contact-card .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.contact-card .actions .btn{height:auto;min-height:46px;font-size:15px;padding:10px 18px;white-space:normal;text-align:center;line-height:1.2;overflow-wrap:anywhere}
.contact-card .note{display:block;font-size:14px;color:var(--on-dark-2);margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.partners-intro .h2{max-width:16ch}
.partners-intro p:not(.kicker){font-size:18px;line-height:1.65;margin-top:18px;max-width:60ch}
.partner-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.partner{background:#fff;border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:12px}
.partner .head{display:flex;gap:14px;align-items:center}
.partner .avatar{background:var(--lagoon);color:var(--lime);width:50px;height:50px;font-size:16px}
.partner h3{font-size:24px;line-height:1.15;letter-spacing:-.025em}
.partner .firm{font-weight:600;color:var(--ink);font-size:15.5px}
.partner .quals{display:flex;flex-wrap:wrap;gap:6px}
.partner .quals span{font:500 12.5px/1 var(--mono);padding:6px 9px;border-radius:6px;background:var(--ink);color:var(--lime)}
.partner .bio{font-size:15.5px}
.partner dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partner dl>div{display:contents}
.partner dt{font:500 13px/1.6 var(--mono);color:var(--lagoon)}
.partner dd{margin:0;color:var(--text)}
.partner ul{display:flex;flex-wrap:wrap;gap:6px}
.partner ul li{font-size:13.5px;font-weight:600;color:var(--ink);padding:6px 11px;border-radius:999px;border:1.5px solid var(--line)}
.partner .addr{font-size:14px;color:var(--muted)}
.partner .plinks{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:4px;font-size:15px}
.partners-foot{display:grid;grid-template-columns:minmax(0,1.6fr) auto;gap:40px;align-items:center;margin-top:32px;padding:28px 32px;border:1.5px solid var(--ink);border-radius:var(--r-lg)}
.partners-foot p{font-size:16px;max-width:76ch}

/* Module video library (lagoon band) */
.cb-video-library{background:var(--lagoon-2)}
.cb-video-library__head{display:flex;justify-content:space-between;gap:34px;align-items:end;margin-bottom:36px}
.cb-video-library__copy{max-width:720px}
.cb-video-library h2{font-size:clamp(30px,3.2vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.cb-video-library__copy>p:not(.kicker){margin-top:14px;font-size:17px;max-width:62ch}
.cb-video-library__cta{flex:none}
.cb-video-library__player{overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-lg);background:#111}
.cb-video-library__player-link{position:relative;display:block;width:100%;height:100%;color:#fff;text-decoration:none}
.cb-video-library__player-link img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cb-video-library__player-link:hover img{transform:scale(1.02)}
.cb-video-library__player .play{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%)}
.cb-video-library__player-label{position:absolute;left:20px;right:20px;bottom:20px;padding:12px 16px;border-radius:var(--r);background:rgba(10,18,16,.82);font-size:15px;font-weight:600}
.cb-video-library__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.cb-video-library__item{display:block;overflow:hidden;border-radius:var(--r);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;transition:background .15s}
.cb-video-library__item:hover{background:rgba(255,255,255,.1)}
.cb-video-library__item.is-featured{box-shadow:inset 0 0 0 2px var(--lime)}
.cb-video-library__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.cb-video-library__thumb img{width:100%;height:100%;object-fit:cover}
.cb-video-library__play{position:absolute;left:10px;bottom:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:11px}
.cb-video-library__label{display:block;padding:12px 14px;font-size:14px;font-weight:600;line-height:1.4}

@media (max-width:1140px){
  .mra-explainer--home .explainer{grid-template-columns:1fr}
  .mra-explainer__media{position:static}
  .tile-solo{grid-template-columns:1fr}
  .tile-solo .shot-link{margin:0 40px 40px}
  .walk,.partners-top{grid-template-columns:1fr;gap:32px}
  .cb-video-library__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .ebs-tutorial + .ebs-tutorial .tutorial,.tut-light.ebs-tutorial + .ebs-tutorial .tutorial{padding-top:64px}
  .tile-band{padding:56px 0}
  .tile-solo .shot-link{margin:0 26px 26px}
  .qb-embed li{grid-template-columns:1fr}
  .partner-list{grid-template-columns:1fr}
  .partners-foot{grid-template-columns:1fr;padding:24px}
  .contact-card,.partner{padding:24px}
  .cb-video-library__head{display:block}
  .cb-video-library__cta{margin-top:22px}
  .cb-video-library__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-video-library__player-label{left:12px;right:12px;bottom:12px;font-size:13.5px}
}
@media (max-width:480px){
  .cb-video-library__grid{grid-template-columns:1fr}
}